半岛外围网上直营

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

相关资源：

• highcharts下载
• highcharts插件及highcharts demo
• highcharts参数
• 深度解析highcharts 4.0

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

• 大部分的图表概念都对应着JavaScript原型或者“类”，它们展现在Highcharts的名字空间中，很容易被修改。例如Highcharts.Series、Highcharts.Tooltip、Highcharts.Chart、Highcharts.Axis、Highcharts.Legend等等。
• 构造函数逻辑是保存在方法 init 中的，允许覆盖初始化。
• 事件可以通过远程与框架事件进行绑定。如果你的框架是jQuery，你可以尝试运行 $(chart).bind('load', someFunction); 。
• 一些原型和属性列举在的Methods、Properties中，还有一些没有列出，这表示在优化和改编库时，它们在后续版本中有可能修改。我们不反对使用，但是提醒你的插件应该经过后续版本测试。鉴别这些函数可以通过以下三种方式：检查Highcharts名字空间、检查开发工具中生成的图表类型、学习highcharts.src.js的源代码。

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 demo代码：

(function (H) {
    Highcharts.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));

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        zoomType: 'x'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

});

Highcharts​函数原型封装

有着动态特性的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 demo​代码：

(function (H) {
    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));

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

});

小试牛刀

学习之后，我们来实践一下。我们来看一个案例，在这个例子中，客户想要在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));

当调用刷新时，我们希望在每个系列的当前点绘制一个trackball。如果一个系列已经包含了一个标记，这个函数应该被丢弃。

H.wrap(H.Tooltip.prototype, 'refresh', function (proceed, points) {

        // Run the original proceed method
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));

        // For each point add or update trackball
        H.each(points, function (point) {
            // Function variables
            var series = point.series,
                chart = series.chart,
                pointX = point.plotX + series.xAxis.pos,
                pointY = H.pick(point.plotClose, point.plotY) + series.yAxis.pos;

            // If trackball functionality does not already exist
            if (!series.options.marker) {
                // If trackball is not defined
                if (!series.trackball) {
                    // Creates a new trackball with same color as the series
                    series.trackball = chart.renderer.circle(pointX, pointY, 5).attr({
                        fill: series.color,
                        stroke: 'white',
                        'stroke-width': 1,
                        zIndex: 5
                    }).add();
                } else {
                    // Updates the position of the trackball
                    series.trackball.attr({
                        x: pointX,
                        y: pointY
                    });
                }
            }
        });
    });

现在trackball已经显示了，但是当工具提示移除后需要隐藏它，因而在隐藏方法里需要一些其他的功能，一个新的封装被添加到了包含这个插件的函数中。 

H.wrap(H.Tooltip.prototype, 'hide', function (proceed) {
    var series = this.chart.series;
    // Run original proceed method
    proceed.apply(this);
    // For each series destroy trackball
    H.each(series, function (serie) {
        var trackball = serie.trackball;
        if (trackball) {
            serie.trackball = trackball.destroy();
        }
    });
});