highcharts addpoint,highcharts series属性
墨初 知识笔记 127阅读
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真是太好用了还有很多组件都很好用。
标签: