Highcharts 2.3 开始提供二次扩展功能，可以通过以下方式进行扩展：

      • 图表中包含的对象通过 JavaScript prototype 或 class 的形式暴露给 Highcharts 命名空间，这些都可以很方便的进行重写，这些对象包括 Highcharts.Legend、Highcharts.Series、Highcharts.Tooltip、Highcharts.Chart 等，详见 API 文档 - 函数及属性部分。

      • 初始化函数 Chart.init 可以进行重写

      • 事件可以通过使用的框架添加到对应的图表实例中，例如在 jQuery 中，可以通过 $(chart).bind(‘load’, someFunction) 添加相关的事件

      • API 文档列举的函数及属性，可以直接进行重新，另外 API 中没有列举的函数也可以修改。没有列举的函数或属性是因为未来可能会变更，所以在重写这些函数或属性时，记得在未来版本的 Highcharts 中进行测试。Highcharts 中所有函数及属性请阅读源码

      插件的形式扩展

      同 jQuery 插件一样，为了防止插件里的变量污染全局变量，所以建议以闭包的形式编写 Highcharts 的插件，实例如下

      1. (function(H) {
      2.   var localVar,        // 插件内部变量
      3.     Series = H.Series; // H 为简写的 Highcharts 命名空间
      5.   // 具体执行的业务逻辑
      6.   doSomething();
      7. }(Highcharts));

      Chart.init 函数钩子

      给已经实例化的图表元素添加事件时，可以在图表初始渲染后添加回调函数，实现方法是在 Chart.prototype.callbacks 数组里添加相关的函数，实例如下：

      1. H.Chart.prototype.callbacks.push(function(chart) {
      2.   H.addEvent(chart.container, 'click', function(e) {
      3.     e = chart.pointer.normalize();
      4.     console.log('Clicked chart at ' + e.chartX + ', ' + e.chartY);
      5.   });
      6.   H.addEvent(chart.xAxis[0], 'afterSetExtremes', function(e) {
      7.     console.log('Set extremes to ' + e.min + ', ' + e.max);
      8.   });
      9. });

      在线试一试

      通过 prototype 重新函数

      JavaScript 在动态更改脚本行为方面表现的非常强大。在 Highcharts 内部，我们创建了一个工具函数 wrap，该函数可以在现有原型函数执行之前或之后添加自己的业务代码，其构造及参数说明如下：

      Highcharts.wrap(object obj, String methodName, function callback)

      • obj：需要封装的函数的父级对象
      • methodName: 函数名
      • callback: 回调函数
        其中原始函数以第一个参数传递给封装函数，原始函数的其他参数在第一个参数后传递给封装函数，下面是示例代码：

      1. H.wrap(H.Series.prototype, 'drawGraph', function(proceed) {
      3.   // 原始函数执行之前编写的逻辑代码
      4.   console.log("We are about to draw the graph: ", this.graph);
      6.   // 执行原始函数（proceed）, arguments 为原始函数参数（第一个参数是原始函数）
      7.   proceed.apply(this, Array.prototype.slice.call(arguments, 1));
      9.   // 原始函数执行之后的逻辑代码
      10.   console.log("We just finished drawing the graph: ", this.graph);
      11. });

      在线试一试

      示例插件：Highstock 轨迹球

      客户需要在股票图成交量数据列中添加数据点标识（轨迹球），默认情况下，只有线形图才有点标识，所以我们用插件来实现了这个功能，下面是实现过程：

      1、创建闭包代码块

      1. (function (H) {
      2.   // 闭包结构，其中 H 为全局 Highcharts 变量
      3. }(Highcharts));

      2、重写相关的方法

      数据点标识（marker） 是在鼠标划过数据点显示的，并在鼠标划出时隐藏，这和提示框交互是类似的，所有我们可以通过重写 Tooltip.prototype.refresh 和 Tooltip.prototype.hide 来实现，这里用 Highcharts.wrap 工具函数来进行二次封装

      1. (function(H) {
      2.   H.wrap(H.Tooltip.prototype, 'refresh', function(proceed, points) {
      3.     // 二次封装 Tooltip.refresh 函数
      4.   });
      6.   H.wrap(H.Tooltip.prototype, 'hide', function(proceed, points) {
      7.     // 二次封装 Tooltip.hide 函数
      8.   });
      9. }(Highcharts));

      3、编写具体的逻辑

      封装 refresh 函数

      1. H.wrap(H.Tooltip.prototype, 'refresh', function(proceed, points) {
      2.   // 执行原始函数
      3.   proceed.apply(this, Array.prototype.slice.call(arguments, 1));
      4.   // 对每个数据点进行添加或更新轨迹球
      5.   H.each(points, function(point) {
      6.     // 先关变量
      7.     var series = point.series,
      8.       chart = series.chart,
      9.       pointX = point.plotX + series.xAxis.pos,
      10.       pointY = H.pick(point.plotClose, point.plotY) + series.yAxis.pos;
      12.     if (!series.options.marker) {
      13.       if (!series.trackball) {
      14.         // 创建轨迹球
      15.         series.trackball = chart.renderer.circle(pointX, pointY, 5).attr({
      16.           fill: series.color,
      17.           stroke: 'white',
      18.           'stroke-width': 1,
      19.           zIndex: 5
      20.         }).add();
      21.       } else {
      22.         // 更新轨迹球位置
      23.         series.trackball.attr({
      24.           x: pointX,
      25.           y: pointY
      26.         });
      27.       }
      28.     }
      29.   });
      30. });

      封装 hide 函数，当提示框隐藏时同时隐藏轨迹球

      1. H.wrap(H.Tooltip.prototype, 'hide', function(proceed) {
      2.   var series = this.chart.series;
      3.   // 执行原始函数
      4.   proceed.apply(this);
      5.   // 对每个数据列进行隐藏轨迹球操作
      6.   H.each(series, function(serie) {
      7.     var trackball = serie.trackball;
      8.     if (trackball) {
      9.       serie.trackball = trackball.destroy();
      10.     }
      11.   });
      12. });

      在线试一试

      原文: https://www.hcharts.cn/docs/how-to-create-plugins