Highcharts中文教程之Highcharts扩展功能（插件制作）_H5之家

Highcharts强大的扩展功能，是它深受广大用户喜爱的原因之一。通过使用highcharts api，很多使用者根据自己的需求制作了highcharts插件，实现了各种功能扩展。关于highcharts 中文教程资源已经比较多了，而扩展这一块的highcharts教程相对比较少。今天，我们就来深入研究highcharts扩展功能，为大家奉上制作插件的highcharts 中文教程。

相关资源：

自从2.3版本以来，Highcharts就一直以模块化的方式在扩展：

Highcharts插件封装

和jQuery插件一样，Highcharts插件也需要用匿名的自动执行函数来封装，以防隐藏全局变量。好的封住方法如下：

(function (H) { var localVar, // local variable Series = H.Series; // shortcut to Highcharts prototype doSomething(); }(Highcharts)); Highcharts调用CHART.INIT

为了向图表的现有部分添加事件监听器，图表首次渲染后，可以创建一个通用回调函数并运行，将函数放到Chart.prototype.callbacks数组中能完成上述操作。

H.Chart.prototype.callbacks.push(function (chart) { H.addEvent(chart.container, 'click', function (e) { e = chart.pointer.normalize(); console.log('Clicked chart at ' + e.chartX + ', ' + e.chartY ); }); H.addEvent(chart.xAxis[0], 'afterSetExtremes', function (e) { console.log('Set extremes to ' + e.min + ', ' + e.max); }); }); 试一试：

效果图

Highcharts图表效果图

highcharts demo代码：

有着动态特性的JavaScript在动态改变脚本行为时非常强大。在Highcharts中可以创建一个名为warp的实例。它可以封装现有的函数原型（“method”），允许你在这之前或之后向其中添加自己的代码。

wrap函数的第一个参数为父类对象，第二个参数为要封装的函数的名字，第三个参数为回调替换函数。原始函数作为第一个参数传递给替换函数，原始的参数也遵循这个规则。

代码示例：

H.wrap(H.Series.prototype, 'drawGraph', function (proceed) { // Before the original function console.log("We are about to draw the graph: ", this.graph); // Now apply the original function with the original arguments, // which are sliced off this function's arguments proceed.apply(this, Array.prototype.slice.call(arguments, 1)); // Add some code after the original function console.log("We just finished drawing the graph: ", this.graph); }); 试一试：

效果图

Highcharts图表效果图

highcharts demo代码：

学习之后，我们来实践一下。我们来看一个案例，在这个例子中，客户想要在Highstock的列类型系列使用标记（“trackballs”），而当前只有线类型系列支持标记。为了实现这个功能，需要编写一个小插件。

这个插件在每个不支持和不包含标记的图表中添加一个trackball。

为了完成这个任务，从以下代码入手：创建一个包含此插件的自动执行函数。

(function (H) { // This is a self executing function // The global variable Highcharts is passed along with a reference H }(Highcharts));

之后，需要为方法Tooltip.prototype.refresh和Tooltip.prototype.hide添加其他的功能。因而，封装这个方法。

(function (H) { H.wrap(H.Tooltip.prototype, 'refresh', function (proceed, points) { // When refresh is called, code inside this wrap is executed }); }(Highcharts));