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

标签 datetime highcharts time-series

我正在使用 Highchart 在两个 y 轴和一个日期时间 x 轴上绘制多个系列(大约 20 个)。数据通过提供 JSON 答案的 PHP 脚本动态加载。到目前为止,还不错。

我的问题是,为了符合 Highchart 标准,我必须通过网络发送每个系列的日期时间信息(当然,我可以在只收到一次日期时间信息后更改 JS 中的 JSON 数据,但这也是麻烦)。 500 个数据点乘以 20 个系列乘以时间戳的 13 个字节 = 每次刷新的流量为 130KB,其中 1/20 就足够了。

我的问题是:是否有可能将“系列”(日期时间)信息传递给 xAxis,然后按发生顺序将 yAxes 系列分配给 xAxis 值? IE。我通过:

[1361796390000,1361796400000,1361796410000] 到 xAxis,和 [1,2,3] 到 y 轴

Highchart 将 1 分配给 1361796390000,将 2 分配给 1361796400000 等等?

感谢您的回答。

最佳答案

您实际上不需要为系列中的每个数据点传递日期时间。您只需要传递系列的开始日期时间,然后使用 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 time尽管有许多不同的方法可以让您轻松地想出您需要的特定时间。为了演示目的,我只是在示例中对其进行了硬编码。

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

这并不能完全回答您关于将时间作为数组传递然后将其分配给 xAxis 的问题,但我确实相信 pointStart 方法没有数组分配那么复杂。

此外,有些相关的是,根据数据更新的频率,您应该将其缓存在服务器和客户端上,以防止在数据实际未发生变化时通过网络进行不必要的刷新。

关于datetime - HighChart 中具有相同 xAxis 数据的几个系列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15066342/

相关文章:

python - 从结构不均匀的字符串中提取日期

海图 : labels inside columnrange bar

javascript - 组合图表 - 带条形图的文字图表

r - 在 acf 图中设置置信区间

javascript - 动态添加系列

r - 如何解析毫秒?

PHP 从前 24 小时 sql 数据库中选择数据

php - 如何获取mysql中不同时区的总行数

sql - 将日期时间变量的时间部分设置为 18 :00

javascript - Highcharts:动态调整实心仪表图的大小