如何格式化Highcharts的(x，y）对数据的日期时间

How to format datetime for (x,y) pair data for Highcharts

本文关键字：数据 时间 日期 格式化 Highcharts      更新时间：2023-09-26

我的序列化方法得到的日期时间字符串如下："2014-07-09T12:30:41Z"

为什么以下代码不起作用？

$(function () {
$('#container').highcharts({
    xAxis: {
        type: 'datetime'
    },
    series: [{
        data: [
            {x:"2014-07-09T12:30:41Z",y: 29.9},
            {x:"2014-09-09T12:30:41Z", y:71.5}
        ],
        name: "Teste"
    }]
});

})；

这个代码工作得很好：

$(function () {
$('#container').highcharts({
    xAxis: {
        type: 'datetime'
    },
    series: [{
        data: [
            {x:Date.UTC(2014, 0, 1),y: 50},
            {x:Date.UTC(2014, 2, 1), y:20}
        ],
        name: "Teste2"
    }]
});

})；

如何转换日期时间格式或配置高图表来处理我的数据？

显然，Highcharts必须将日期预期为自"1970年1月1日00:00:00"世界时间以来的毫秒数，这就是Date.UTC()检索的值，因此您可以完成相同的操作：

series: [{
    data: [
        {x:(new Date("2014-07-09T12:30:41Z")).getTime(),y: 29.9},
        {x:(new Date("2014-09-09T12:30:41Z")).getTime(), y:71.5}
    ],
    name: "Teste"
}]

在图表中使用数据之前，您可以对数据进行预处理。示例-http://jsfiddle.net/Jx5n2/3851/

var data = [{
    x: "2014-07-09T12:30:41Z",
    y: 29.9
}, {
    x: "2014-09-09T12:30:41Z",
    y: 71.5
}],
len = data.length,
i = 0,
outData = [];
for (i = 0; i < len; i++) {
    outData[i] = {
        x: Date.parse(data[i].x),
        y: data[i].y
    }
}
$(function () {
    $('#container').highcharts({
        xAxis: {
            type: 'datetime'
        },
        series: [{
            data: outData
        }]
    });
});
相关文章：