使用highcharts创建动态图表时遇到的问题及解决方式

最新推荐文章于 2022-04-12 19:15:25 发布

区块链成都

最新推荐文章于 2022-04-12 19:15:25 发布

阅读量1.1k

点赞数 1

分类专栏：前端文章标签：前端 highcharts javascript

本文链接：https://blog.csdn.net/icefog1234/article/details/77891716

版权

本文介绍了在使用Highcharts创建动态图表时遇到的三个问题及其解决方案：1) 横坐标标签左移导致数据不完整，通过设置`addPoint`方法的参数解决；2) 数据过多时横坐标标签显示混乱，通过设置`xAxis.labels`属性限制步长和行数；3) 如何自定义横坐标标签，利用`categories`属性结合自定义数组实现。

摘要由CSDN通过智能技术生成

问题1：横坐标标签（label）始终向左侧移动，从而不能显示完整数据

解决：series.addPoint()方法是向图表中绘制点的函数，其第三个参数代表是否左移，设置为false即可

events: {                                                           
	     load: function() {                                             						    
               var series = this.series[0];                               				                                 
	       var x = n, y = totalCap;                                  
	       series.addPoint([x, y], true, false); //绘制点，第三个参数为是否横轴左移               					                                                 
	     }                                                               
}

问题2：显示数据较多时，横坐标标签（label）变得密密麻麻，而且会分成两至三行显示

如图：