HighCharts点击无响应问题

HighCharts 点击无响应问题

背景介绍

项目需要展示一个小时内日志设备的状态，由于数据量比较大，使用echarts效果不好。于是采用highcharts来处理显示。highcharts使用起来很方便，还有打印照片功能，相当满意。这里采用官网给的例子展示一下效果。

但是问题是我需要点击某些点来跳转其他界面来进一步解析。按照其他人给出的方法，只要对series配置click事件就可以实现。

plotOptions:{  
    spline: {  
         marker: {  
            radius: 4,  
            lineColor: '#666666',  
            lineWidth: 1  
         }  
      },  
       series: {  
           cursor: 'pointer',  
           events: {  
               click: function(e) {  
                   console.log(e.point.x);  
               }  
           }  
       }  
},  
series: [{  
    name:'20000',  
    data: this.zhouliu,  
    lineWidth: 0.5  
}]  

但是当我点击highcharts中的点时，控制台一直没有坐标打印。但是我在线编辑代码测试时，却能正常响应，到底是哪里出问题了？

问题原因

在尝试各种方法无果后，偶然间我发现了highcharts的一个功能，并解决了我这个问题。当数据量比较大时，可以用鼠标选择一小段，然后松手，highcharts自动忽略其他段，只展示选中的这一段。

这是选择了其中的一段，然后在此缩小范围。

此时可以看到左上角有个Reset Zoom，一键点击就可复原最初2w个点的状态。此时点击任意一个点就能正确响应了，这就解释了之前点击没有响应的问题的原因了-鼠标没法准确选中点。我后来在2w点显示情况下也偶然成功过，侧面印证了这个原因。highcharts真是太好用了，还有很多组件都很好用。