javascript - Highcharts XRange 日期时间格式

Question

我想创建一个 xrange highcharts。据此demo ，他们使用 UTC 格式创建日期，但我从 MySQL 的 json 输出是这样的

[{"y":1,"x":"2018-01-19 08:10:57","x2":"2018-01-19 10:18:04"},
 {"y":3,"x":"2018-01-19 07:39:55","x2":"2018-01-19 08:21:01"},
 {"y":2,"x":"2018-01-19 13:06:46","x2":"2018-01-19 14:30:49"},
 {"y":4,"x":"2018-01-19 10:23:44","x2":"2018-01-19 11:54:48"},
 {"y":2,"x":"2018-01-19 08:10:05","x2":"2018-01-19 09:15:12"},
 {"y":4,"x":"2018-01-19 09:00:16","x2":"2018-01-19 10:03:20"},
 {"y":4,"x":"2018-01-19 08:10:49","x2":"2018-01-19 08:50:53"},
 {"y":5,"x":"2018-01-19 08:07:15","x2":"2018-01-19 09:04:21"},
 {"y":3,"x":"2018-01-19 08:30:22","x2":"2018-01-19 09:28:25"}]

如何更改格式以使图表正常工作？请帮忙，谢谢

Answer 1

您需要将 x 和 x2 值更改为 Date.UTC(...) 或 unix时间戳(以毫秒为单位)。

在 php 中，您可以通过以下方式重新格式化数据:

<?php

$data = json_decode('[
    {"y":1,"x":"2018-01-19 08:10:57","x2":"2018-01-19 10:18:04"},
    {"y":3,"x":"2018-01-19 07:39:55","x2":"2018-01-19 08:21:01"},
    {"y":2,"x":"2018-01-19 13:06:46","x2":"2018-01-19 14:30:49"},
    {"y":4,"x":"2018-01-19 10:23:44","x2":"2018-01-19 11:54:48"},
    {"y":2,"x":"2018-01-19 08:10:05","x2":"2018-01-19 09:15:12"},
    {"y":4,"x":"2018-01-19 09:00:16","x2":"2018-01-19 10:03:20"},
    {"y":4,"x":"2018-01-19 08:10:49","x2":"2018-01-19 08:50:53"},
    {"y":5,"x":"2018-01-19 08:07:15","x2":"2018-01-19 09:04:21"},
    {"y":3,"x":"2018-01-19 08:30:22","x2":"2018-01-19 09:28:25"}
]');

array_map(function ($d) {
    $d->x = (new DateTime($d->x, new DateTimeZone('UTC')))->getTimestamp() * 1000;
    $d->x2 = (new DateTime($d->x2, new DateTimeZone('UTC')))->getTimestamp() * 1000;
}, $data);

$data = json_encode($data);

print_r($data);

这给出了输出:

[{"y":1,"x":1516349457000,"x2":1516357084000},
{"y":3,"x":1516347595000,"x2":1516350061000},
{"y":2,"x":1516367206000,"x2":1516372249000},
{"y":4,"x":1516357424000,"x2":1516362888000},
{"y":2,"x":1516349405000,"x2":1516353312000},
{"y":4,"x":1516352416000,"x2":1516356200000},
{"y":4,"x":1516349449000,"x2":1516351853000},
{"y":5,"x":1516349235000,"x2":1516352661000},
{"y":3,"x":1516350622000,"x2":1516354105000}]

参见DEMO 使用重新格式化的数据。