highcharts幾個常用插件的整合

主要包括：
no-data-display:用於圖表沒有數據的時候給用戶一提示信息如顯示“無數據”而不是空白
customEvent：用於增加除了highcharts本身支持的單擊事件以為的事件，如鼠標右鍵

boost：用於渲染大量數據的插件，提高插件渲染速度。數據量一般超過5000個點。

 

在開發過程中如果不使用boost插件應該是不會有太大的問題，主要是采用了boost插件后由於為提高渲染速度采用的不是svg繪圖的方式，會產生一些問題。
瀏覽器打開如下地址：http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/scatter-boost/
在左上角的html區域增加一行代碼<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>

然后點擊run按鈕，發現圖表雖然能夠渲染出來但是顯示了“no data to display”信息，顯然這不是我們想要的結果。

嘗試在左下部分圖表配置的代碼中增加click事件，發現沒有生效。

同時我想一些圖表不采用boost機制即使一些數據大於默認的5000個點。

 

 

1、boost是否啟用
增加boost：{enabled：false} 屬性，避免自動開啟boost機制導致有數據時仍提示沒有數據。
如果設置了zone效果失效，可以通過增加 plotOptions: {series: {   boostThreshold:0}。
2、采用boost情況
不顯示沒有數據的提示信息：修改no-data-to-display的源碼大約142行左右增加一個圖表類型如果你的圖表類型存在其中則不需要增加，我用的是散點圖，需要增加一行'scatter'   ---主要是判斷是否數據存在的方法
增加事件信息如單擊：本身boost是不支持事件信息的，通過搜索互聯網貌似通過halo可是實現，代碼如下：
    

  point: {
                events: {
                    click: function() {
                        alert("click");
                        console.log(this);
                    },
                    mouseOver: function() {
                        if (this.series.halo) {
                            this.series.halo.attr({
                                'class': 'highcharts-tracker'
                            }).toFront();
                        }
                    }
                }
            },

　　

如果你的頁面沒有引入customEvent插件這樣應該是可以正常使用了，如果引用了，那么鼠標單擊還是無效的。
嘗試能夠通過類似boost那樣多customEvent插件進行修改，增加一個參數enabled默認是開啟這個插件，如果設置為false則不啟用。
修改customEvent.js大約78行增加：

var enabled=true;
      //chart增加屬性 customEvent:{enabled:false}使該插件失效
      if (chart && chart.options && chart.options.customEvent) {
        enabled = typeof chart.options.customEvent.enabled === 'undefined' ?
            true :
            chart.options.customEvent.enabled;
      }


      if (enabled){
       //原有代碼
}
  // call default action
      proceed.apply(this, Array.prototype.slice.call(arguments, 1));

　　

當然了個人只是從使用角度進行了實現，沒有深究底層實現的機制，如果大家有更好的辦法或不對之出，歡迎指正。

 

基於highchart6的整合demo，解壓后查看demo.html!

https://files.cnblogs.com/files/willam/highchart.rar