Fatal编程技术网
  • javascript/
  • Javascript 在Highcharts中加载数据的最佳方式

Javascript 在Highcharts中加载数据的最佳方式

javascript highcharts

Javascript 在Highcharts中加载数据的最佳方式,javascript,highcharts,Javascript,Highcharts,我需要在15分钟的时间间隔内加载每个系列最多6个月的数据。系列的数量可能在2到20之间 因此，我尝试加载一个简单的值数组[28,83,13,30，…]，并将plotOptions设置为从00:00开始，间隔15分钟，以便动态生成xAxis。效果很好 我还需要包括注释，这些注释可以在15分钟间隔之外的任何时间发生，如13:19 这是否意味着我需要加载一个[x，y]对数组，例如[[00:00'，28]，'00:15'，83]，'00:30'，13]，'00:45'，30]，…]，以便能够在随机时间绘

我需要在15分钟的时间间隔内加载每个系列最多6个月的数据。系列的数量可能在2到20之间

因此，我尝试加载一个简单的值数组
[28,83,13,30，…]
，并将
plotOptions
设置为从
00:00
开始，间隔
15分钟
，以便动态生成
xAxis
。效果很好

我还需要包括注释，这些注释可以在15分钟间隔之外的任何时间发生，如
13:19

这是否意味着我需要加载一个
[x，y]
对数组，例如
[[00:00'，28]，'00:15'，83]，'00:30'，13]，'00:45'，30]，…]
，以便能够在随机时间绘制注释

加载
[[x1，y1]，[x2，y2]，[x3，y3]，…]数组是否比加载
[y1，y2，y3，…]数组慢？
为图表提供的数据格式不会影响添加注释的能力。图表点仍将具有相同的属性结构

您可以轻松比较不同数据格式的性能：


console.time('Create chart');

Highcharts.chart('container', {...});

console.timeEnd('Create chart')


每个系列的17280点测试（4系列）：


    

  • 数值数组：496.66ms-664.18ms
    
现场演示：
    

    • 

  • 具有两个值的数组：444.14ms-610.68ms
    
现场演示：
    

    • 

  • 对象数组（无涡轮模式）：496.46ms-726.66ms
    
现场演示：
    

    • 


正如您所看到的，差异相对较小。最佳结果（第二次测试）可能是因为图表不必计算x值