javascript - Highcharts 的 x 轴(日期时间)格式

Question

我正在使用js制作图表。使用php获取数据，x轴是时间戳(例如2018.01.22.18(格式为年.月.日.小时.分钟))，y轴是温度。

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

预计 highcharts 与此格式不匹配，因此图表按照它们在数组中放置的顺序输出。我希望数据的时间戳恰好位于 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>