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();
        }
    });
});