使用Highcharts附加数据(实时更新图表)

Question

在使用Highcharts的效率方面.如果服务器发送点数组(一次大约5,000个).使用addPoint方法并添加每个点更有效吗？或者使用新的chuck联系上一个数组并调用redraw()

• 选项1:

for(let point in newData) series.addPoint(point, redraw = false)

• 选项2:

oldData = oldData.concat(newData)

Highcharts会重新渲染所有点还是只重新创建新部分？

Answer 1

正如@wergeld 所建议的，我尝试了这两种选择。

数据如下所示：[{x:1, y:2, step: 1}, {x:2, y:3, step: 2}...]我运行相同的数据大小几次以获得平均值。

选项 1（添加点）

代码如下：

newData.forEach(el=> chart.series[0].addPoint(el, false, false, true)) chart.redraw();

结果是：

 DataSize |   Seconds
 -------------------
 877      |   0.5 
 8770     |   1.5
 17540    |   8.5 
 87700    |   563 

选项 2（setData / concat）

代码如下：

chart.series[0].setData(oldData.concat(newData))

结果是：

 DataSize |   Seconds
 -------------------
 877      |   0.5 
 8770     |   1.85
 17540    |   3.4 
 87700    |   15 
 175400   |   25 
 877000   |   190

结论

很明显，当数据大小变得大于每块数据 10k 时，该addPoint方法会明显变慢。