简体   繁体   English

高图:使用boost在大批量线图中快速,实时地更新数据

[英]Highcharts: rapid, real-time data updates in high volume line charts using boost

Scenario: 场景:

  1. Using Highcharts normal charts, not Highstock 使用Highcharts普通图表,而不是Highstock
  2. At least 4 separate charts that are each line charts 至少4个单独的图表,每个图表均为折线图
  3. Each chart displays a maximum of 5,000 points in a 10 second window 每个图表在10秒的窗口中最多显示5,000点
  4. Data comes via websocket at 250 points per second, although rate and volume of how the data comes (eg, 50 points per 200 milliseconds vs 1 point per 4 milliseconds) can be optimized to fit how best to work with Highcharts 可以通过websocket以每秒250点的速度来传输数据,尽管可以优化数据传输的速率和数量(例如,每200毫秒50个点对每4毫秒1点),以适应与Highcharts配合使用的最佳方式
  5. Old points get shoved out after getting outside of the 10 second window 超出10秒窗口后,旧点将被淘汰

Questions: 问题:

  1. Is it correct to assume this is an ideal scenario for using the Highcharts boost module to improve performance? 假设这是使用Highcharts Boost模块改善性能的理想方案是否正确? Or would the rapidity of data updates not play well with boost? 还是数据更新的快速性不能很好地发挥作用?
  2. Is there an existing Highcharts example fiddle or pen that approximates the scenario I've described (eg, using mock data generated on the client-side) and uses the boost module? 是否存在现有的Highcharts示例小提琴或钢笔,可以近似我所描述的场景(例如,使用客户端生成的模拟数据)并使用boost模块?
  3. Are there any other recommendations you can make for implementing here with Highcharts? 您还可以针对在这里使用Highcharts实施提出其他建议吗?

I've prepared a simple performance test. 我准备了一个简单的性能测试。 I update a chart with 5000 random generated points by using setData function every 3 seconds. 我每3秒使用setData函数用5000个随机生成的点更新一个图表。 You can find the explanation of the arguments passed to this function here: http://api.highcharts.com/highcharts/Series.setData 您可以在此处找到传递给此函数的参数的说明: http : //api.highcharts.com/highcharts/Series.setData

Performance with boost module: http://jsfiddle.net/kkulig/7u6ozqg8/ 提升模块的性能: http //jsfiddle.net/kkulig/7u6ozqg8/

Output on my PC: 在我的电脑上输出:

time with boost: 189.785888671875ms
time with boost: 109.576904296875ms
time with boost: 159.59326171875ms
time with boost: 75.766845703125ms
time with boost: 132.65625ms
time with boost: 174.887939453125ms
time with boost: 41.648193359375ms
time with boost: 54.340087890625ms
time with boost: 72.6669921875ms

Performance without boost module: http://jsfiddle.net/kkulig/gLehoqp5/ 不带Boost模块的性能: http //jsfiddle.net/kkulig/gLehoqp5/

Output on my PC: 在我的PC上输出:

time without boost: 211.60595703125ms
time without boost: 146.89501953125ms
time without boost: 180.163818359375ms
time without boost: 156.8388671875ms
time without boost: 248.77197265625ms
time without boost: 149.34130859375ms
time without boost: 142.1357421875ms
time without boost: 189.8759765625ms
time without boost: 203.60009765625ms

Answers 答案

  • Question 1 & 2 - as the above examples show the boost modules seems to work well for this scenario. 问题1和2-如以上示例所示,在这种情况下,升压模块似乎运行良好。
  • Question 3 - always be aware of how the function that you use for updating your chart works (read the description from the API). 问题3-始终了解用于更新图表的功能的工作原理(请从API中阅读说明)。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM