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

Question

我需要在x轴上显示日期/时间。现在在x轴上有一些奇怪的数据00 00 00 001,00 00 00 002.我想看看1.08.2014 22.01.01（day.month.year hour.minute.second）。 我的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]
] 

等。 （时间，值）。

我的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();}
});
});

结果：

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

Answer 1

问题是你的JSON数据。它不是Highstock可以立即用于在x轴上显示为datetime的格式。问题是你的字符串，例如＆＃34; 2014年6月30日19:14＆＃34;，不是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])将您的字符串解析为具有年，月日值的Date对象......然后您使用该对象的getTime()函数来获取时间戳。