highcharts几个常用插件的整合

Posted 2020-10-11

主要包括：
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