Highcharts強(qiáng)大的擴(kuò)展功能，是它深受廣大用戶(hù)喜愛(ài)的原因之一。通過(guò)使用highcharts api，很多使用者根據(jù)自己的需求制作了highcharts插件，實(shí)現(xiàn)了各種功能擴(kuò)展。關(guān)于highcharts 中文教程資源已經(jīng)比較多了，而擴(kuò)展這一塊的highcharts教程相對(duì)比較少。今天，我們就來(lái)深入研究highcharts擴(kuò)展功能，為大家奉上制作插件的highcharts 中文教程。

相關(guān)資源：

• highcharts下載
• highcharts插件及highcharts demo
• highcharts參數(shù)
• 深度解析highcharts 4.0

自從2.3版本以來(lái)，Highcharts就一直以模塊化的方式在擴(kuò)展：

• 大部分的圖表概念都對(duì)應(yīng)著JavaScript原型或者“類(lèi)”，它們展現(xiàn)在Highcharts的名字空間中，很容易被修改。例如Highcharts.Series、Highcharts.Tooltip、Highcharts.Chart、Highcharts.Axis、Highcharts.Legend等等。
• 構(gòu)造函數(shù)邏輯是保存在方法 init 中的，允許覆蓋初始化。
• 事件可以通過(guò)遠(yuǎn)程與框架事件進(jìn)行綁定。如果你的框架是jQuery，你可以嘗試運(yùn)行 $(chart).bind('load', someFunction); 。
• 一些原型和屬性列舉在的Methods、Properties中，還有一些沒(méi)有列出，這表示在優(yōu)化和改編庫(kù)時(shí)，它們?cè)诤罄m(xù)版本中有可能修改。我們不反對(duì)使用，但是提醒你的插件應(yīng)該經(jīng)過(guò)后續(xù)版本測(cè)試。鑒別這些函數(shù)可以通過(guò)以下三種方式：檢查Highcharts名字空間、檢查開(kāi)發(fā)工具中生成的圖表類(lèi)型、學(xué)習(xí)highcharts.src.js的源代碼。

Highcharts插件封裝

和jQuery插件一樣，Highcharts插件也需要用匿名的自動(dòng)執(zhí)行函數(shù)來(lái)封裝，以防隱藏全局變量。 好的封住方法如下：

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

Highcharts調(diào)用CHART.INIT

為了向圖表的現(xiàn)有部分添加事件監(jiān)聽(tīng)器，圖表首次渲染后，可以創(chuàng)建一個(gè)通用回調(diào)函數(shù)并運(yùn)行，將函數(shù)放到Chart.prototype.callbacks數(shù)組中能完成上述操作。

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?函數(shù)原型封裝

有著動(dòng)態(tài)特性的JavaScript在動(dòng)態(tài)改變腳本行為時(shí)非常強(qiáng)大。在Highcharts中可以創(chuàng)建一個(gè)名為warp的實(shí)例。它可以封裝現(xiàn)有的函數(shù)原型（“method”），允許你在這之前或之后向其中添加自己的代碼。

wrap函數(shù)的第一個(gè)參數(shù)為父類(lèi)對(duì)象，第二個(gè)參數(shù)為要封裝的函數(shù)的名字，第三個(gè)參數(shù)為回調(diào)替換函數(shù)。原始函數(shù)作為第一個(gè)參數(shù)傳遞給替換函數(shù)，原始的參數(shù)也遵循這個(gè)規(guī)則。 

代碼示例：

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]
    }]

});

小試牛刀

學(xué)習(xí)之后，我們來(lái)實(shí)踐一下。我們來(lái)看一個(gè)案例，在這個(gè)例子中，客戶(hù)想要在Highstock的列類(lèi)型系列使用標(biāo)記（“trackballs”），而當(dāng)前只有線(xiàn)類(lèi)型系列支持標(biāo)記。為了實(shí)現(xiàn)這個(gè)功能，需要編寫(xiě)一個(gè)小插件。

這個(gè)插件在每個(gè)不支持和不包含標(biāo)記的圖表中添加一個(gè)trackball。

為了完成這個(gè)任務(wù)，從以下代碼入手：創(chuàng)建一個(gè)包含此插件的自動(dòng)執(zhí)行函數(shù)。

(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添加其他的功能。因而，封裝這個(gè)方法。

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

當(dāng)調(diào)用刷新時(shí)，我們希望在每個(gè)系列的當(dāng)前點(diǎn)繪制一個(gè)trackball。如果一個(gè)系列已經(jīng)包含了一個(gè)標(biāo)記，這個(gè)函數(shù)應(yīng)該被丟棄。

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

現(xiàn)在trackball已經(jīng)顯示了，但是當(dāng)工具提示移除后需要隱藏它，因而在隱藏方法里需要一些其他的功能，一個(gè)新的封裝被添加到了包含這個(gè)插件的函數(shù)中。 

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