javascript - 如何在 highstock 中的 x 轴上显示日期？

Question

我需要在 x 轴上显示日期/时间。现在在x轴上有一些奇怪的数据00 00 00 001、00 00 00 002。我想看到1.08.2014 22.01.01(日.月.年时.分.秒)。 我的 JSON 数据:

[
    ["30 June 2014 19:14",24],
    ["30 June 2014 19:16",41],
    ["30 June 2014 19:16",12],
    ["30 June 2014 19:16",8]
] 

等等。 (时间，值(value))。

我的 Javascript 代码 - 它可以工作，但不能在 x 轴上显示日期/时间:

var seriesOptions = [],
seriesCounter = 0,


//My data
names = ['data_input_1', 'data_input_2'],colors = Highcharts.getOptions().colors;
//My graph captions
captions = ['Датчик 1', 'Датчик 2'];
//Type of my two graph - 2 lines
type = ['line', 'line'];

//Configure graph (now 2 names so 2 graph)
$.each(names, function(i, name) 
{
//get data
$.getJSON('../graph/select_data.php?'+ name.toLowerCase() +'',  

function(data) 
{
seriesOptions[i] = 
{
name: captions[i],
data: data,
type:type[i],
//I think- this is the place for code, that i want
// it doesnot work here categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
// all other code here - work well

};

seriesCounter++;
if (seriesCounter == names.length){createChart();}
});
});

结果:

如何在 highstock 中的 x 轴上显示我的两条线的日期？

Answer 1

问题出在您的 JSON 数据上。 Highstock 无法立即使用该格式来显示 datetime在 x 轴上。问题是您的字符串(例如“30 June 2014 19:14”)不是 timestamps 。

x 轴需要以毫秒为单位的时间戳(自 1970 年 1 月 1 日起)。请注意，从其他来源收到的某些时间戳可能以秒为单位，而不是毫秒。如果这是问题所在，您必须将它们乘以 1000。

当使用字符串时，它对 Highstock 来说没有任何意义，因此 Highstock 只是假装数据的时间戳是 0, 1, 2...，转换为 00:00:00.000(0 毫秒)、00:00 :00.001(1 毫秒)、00:00:00.002(2 毫秒)...

您需要将日期的字符串表示形式转换为时间戳。我不确定您是否可以操纵接收 JSON 的格式，但如果不能，您可以对其进行后处理以转换数据，如下所示 ( JSFiddle example ):

var data = [
    ["30 June 2014 19:15",24],
    ["30 June 2014 19:16",41],
    ["30 June 2014 19:17",12],
    ["30 June 2014 19:18",8]
];

var timestampData = [];

for(i in data) {
    timestampData.push([new Date(data[i][0]).getTime(), data[i][3]]);
}


$('#container').highcharts({
    ...
    series: [{
        data: timestampData
    }]
});

这里的本质是 new Date(data[i][0])将您的字符串解析为日期对象，其中包含年、月、日的值...然后您使用 getTime()该对象的函数来获取时间戳。