HighChart中具有相同xAxis数据的几个系列

3
我使用Highchart在两个y轴和一个日期时间x轴上绘制多个系列(约20个)。数据通过提供JSON响应的PHP脚本动态加载。到目前为止,一切顺利。
我的问题是为了符合Highchart要求,我必须通过网络发送每个系列的日期时间信息(当然,我可以在收到日期时间信息后在JS中更改JSON数据,但这也很麻烦)。500个数据点乘以20个系列乘以13个字节的时间戳=每次刷新130KB的流量,而其中1/20就足够了。
我的问题是:是否有可能将“系列”(日期时间)信息传递给xAxis,然后按出现顺序将yAxis系列分配给xAxis值?也就是说,我传递:
[1361796390000,1361796400000,1361796410000] 到xAxis,并且 [1,2,3] 到yAxis
Highchart将1分配给1361796390000、2分配给1361796400000等等?
谢谢您的回答。
1个回答

1

您实际上不需要为系列中的每个数据点传递日期时间。 您只需要传递系列的开始日期时间,然后使用pointStart告诉图表何时开始计数,如下所示:

series: [{
    name: 'Wind Speed',
    data: [0.52, 0.778, 0.746, 0.594, 0.716, 0.793, 0.648, 0.828, 0.202, 0.066, 0.116, 0.116, 0.17, 0.195, 0.051, 0, 0.368, 2.365, 2.841, 2.693, 2.416, 2.541, 2.429, 2.888],
    pointStart: 1360893600000,
    pointInterval: 3600000
}]

在这里查看演示:http://jsfiddle.net/Reality_Extractor/pNFYL/

pointStart需要Unix时间,尽管有很多不同的方法可以轻松地得到你需要的特定时间。在示例中,我只是为了演示目的而硬编码它。

当您使用pointStart时,pointInterval是必要的,以准确地分配时间给数据点。值得注意的是,这仅适用于具有常规pointIntervals的数据。如果您有不规则的数据,您确实需要为每个数据点提供日期时间。

这并没有完全回答您关于将时间作为数组传递然后将其分配给xAxis的问题,但我确信pointStart方法比数组分配方法更简单。

另外,有些相关的,根据您的数据更新频率,您应该在服务器和客户端上进行缓存,以防止在数据实际上没有更改时进行不必要的网络刷新。


1
非常感谢您的帖子,它回答了我的问题。问题在于我通常有定期的点间隔(每10秒一次)。然而,偶尔可能会出现数据集不可用的情况。我仍然可以将这些缺失的值作为NULL值传递给HighCharts - 这就是我要尝试的方法。 - final
只有在所有数据分隔的数量完全相同且在给定时间跨度内没有缺失数据点时,此方法才有效。 - CaptainBli

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接