Highcharts的x轴（日期时间）格式

Question

我正在使用js制作图表。 使用php获取数据，x轴为时间戳（例如2018.01.22.18（格式为year.month.day.hour.minute）），y轴为温度。

我正在绘制多条线，而不是一条线。 但是，相应的时间戳必须适合x轴，事实并非如此。 （每个数据的时间戳是不同的。）

还可以预期高图与该格式不匹配，因此图形将按照它们在数组中的放置顺序进行输出。 我希望数据的时间戳准确地在x轴上。

屏幕截图：

Answer 1

如您所说，您必须将其转换为时间戳，您可以使用PHP或Javascript来实现：

JavaScript示例：

 // you date var myDate="2018.01.22.18.00"; myDate=myDate.split("."); // build new js date object var newDate=myDate[1]+"-"+myDate[2]+"-"+myDate[0]+" "+myDate[3]+":"+myDate[4]; // return the timestamp console.log(new Date(newDate).getTime()); //will display 1516633200000 

完整的代码将如下所示：

 // your initiale data array var data = [ ["2018.01.01.18.00", 1.1, 4.7], ["2018.01.02.18.00", 1.8, 6.4], ["2018.01.03.18.00", 1.7, 6.9], ["2018.01.04.18.00", 2.6, 7.4], ["2018.01.05.18.00", 3.3, 9.3], ["2018.01.06.18.00", 3.0, 7.9], ["2018.01.07.18.00", 3.9, 6.0] ] // convert to timestamp var timestampData = new Array(data.length); for (var i = 0; i < data.length; i++) { // your date myDate=data[i][0].split("."); // build new js date object var myNewDate = new Date(myDate[1]+"-"+myDate[2]+"-"+myDate[0]+" "+myDate[3]+":"+myDate[4]); timestampData[i] = new Array(myNewDate.getTime() , data[i][1] , data[i][2]); } // Create the chart Highcharts.chart('container', { chart: { type: 'arearange', zoomType: 'x' }, xAxis: { type: 'datetime' }, series: [{ name: 'Temperatures', data: timestampData }] }); 

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>