以固定间隔在x轴上渲染Highcharts数据时间

时间:2013-05-30 17:13:47

标签: javascript jquery highcharts unix-timestamp

我有两个充满数据的数组。一个数组只是随机整数(例如1.7,2.8,3.4等),另一个数组是该数据的相应时间戳的对应列表(例如1366585199)。

目前我的Highcharts代码看起来像这样:

dataArray = ("2.4","5.6","3.1", ...);
timeArray = ("1366585199","1366585233","1366585355", ...)

       function foo(dataArray, timeArray) {
            $('#viz_1').highcharts({
                chart: {
                    type: 'line'
                },
                title: {
                    text: 'Data Index'
                },
                xAxis: {
                    type: 'datetime', // this isn't doing anything??
                    categories: timeArray
                },
                yAxis: {
                    title: {
                    text: 'Data Value'
                    },
                },
                series: [{
                    name: topicID,
                    data: JSON.parse("[" + dataArray + "]")
                }]
            })
        }; 

这可以工作并向页面呈现一个折线图,但X轴显然充满了大约50个Unix时间戳!

我似乎无法弄清楚如何让Highcharts API获取Unix时间戳数组,使用它来排列数据点,但只是定期在X轴上显示人类可读的日期?

1 个答案:

答案 0 :(得分:8)

您不能混用'datetime'categories。 我倾向于将x / y值作为成对发送到HighCharts中。像:

data: [
            [Date.parse('01/01/2000 00:00:00'), 55205],
            [Date.parse('01/01/2003 00:00:00'), 59091],
            [Date.parse('01/01/2004 00:00:00'), 64347],
            [Date.parse('01/01/2005 00:00:00'), 71067],
            [Date.parse('01/01/2006 00:00:00'), 77770],
            [Date.parse('01/01/2011 00:00:00'), 81166]
        ]

如果你有javascript时间戳,你可以发送它们,如:

[31536000000, 456]