如何使 x 轴 动态化以处理日期时间数据和缩放。我希望 x-axis 动态显示年份，然后是月份和年份，最后是基于缩放级别的日期和时间（zoomType：'x'）。这是完整的实现：
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Dynamic xAxis</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
var xAxisData = [
"07/12/2016 12:00:00 am",
"07/12/2016 01:00:00 am",
"07/12/2016 02:00:00 am",
"07/12/2016 03:00:00 am",
"07/12/2016 04:00:00 am",
"07/12/2016 12:00:00 pm",
"07/12/2016 01:00:00 pm",
"07/12/2016 02:00:00 pm",
"07/12/2016 03:00:00 pm",
"07/12/2016 11:00:00 pm",
"08/12/2016 05:00:00 am",
"08/12/2016 06:00:00 am",
"08/12/2016 07:00:00 am",
"08/12/2016 09:00:00 am",
"08/12/2016 10:00:00 am",
"08/12/2016 10:00:00 am",
"08/12/2016 12:00:00 pm",
"08/12/2016 03:34:29 pm",
"08/12/2016 04:00:00 pm",
"08/12/2016 05:00:00 pm",
"08/12/2016 06:34:29 pm",
"08/12/2016 07:34:29 pm",
"08/12/2016 08:34:29 pm",
"08/12/2016 10:00:00 pm",
"08/12/2016 11:00:00 pm",
"09/12/2016 12:00:00 am",
"09/12/2016 01:00:00 am",
"09/12/2016 02:00:00 am",
"09/12/2016 03:00:00 am",
"09/12/2016 04:00:00 am",
"09/12/2016 12:00:00 pm",
"09/12/2016 01:00:00 pm",
"09/12/2016 02:00:00 pm",
"09/12/2016 03:00:00 pm",
"09/12/2016 11:00:00 pm",
"10/12/2016 12:00:00 am",
"10/12/2016 01:00:00 am",
"10/12/2016 02:00:00 am",
"10/12/2016 03:00:00 am",
"10/12/2016 04:00:00 am",
"10/12/2016 12:00:00 pm",
"10/12/2016 01:00:00 pm",
"10/12/2016 02:00:00 pm",
"10/12/2016 03:00:00 pm",
"10/12/2016 11:00:00 pm"
];
var tabY= [
39966.31,
38054.98,
43569.27,
43619.26,
43735.39,
43619.26,
39895.25,
39966.31,
43201.27,
40043.66,
40071.34,
38794.64,
39480.24,
40869.52,
43735.39,
43582.69,
43735.39,
43692.54,
60093.51,
43201.27,
40093.51,
42580.97,
43619.26,
38556.31,
40043.66,
39000.49,
39966.31,
43201.27,
38865.23,
42093.24,
40071.34,
43637.56,
38996.11,
40071.34,
42093.24,
40014.85,
43576.01,
40093.51,
43201.27,
38865.23,
39966.31,
38794.64,
39895.25,
40093.51,
40043.66
];
Highcharts.chart('container', {
exporting: {
buttons: {
contextButton: {
menuItems: ["downloadPNG", "downloadPDF"]
}
},
sourceWidth: 1502,
scale: 1,
chartOptions: {
chart: {
height: this.chartHeight
}
}
},
chart: {
zoomType: 'x',
type: 'column'
},
title: {
text: 'Relevé de prélèvement des températures et de la Salinité',
align: 'left'
},
subtitle: {
text: "Site : " + data.nom + " du " + data.DisplayStartDate + " au " + data.DisplayEndDate + " (inclus)",
align: 'left'
},
xAxis: {
type: 'datetime',
title: {
text: "Date (Heure, GMT +03:00)"
},
categories: xAxisData
},
yAxis: {
min: 0,
title: {
text: selectedValues[0] === "1" ? "Conductivite" : "Temperature",
style: { color: "#B5C0D0" }
}
},
tooltip: {
valueSuffix: selectedValues[0] === "1" ? " µS/cm" : " °C",
xDateFormat: '%e %b %Y, %H:%M'
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'rgba(255,255,255,0.25)'
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Conductivite',
data: tabY
}]
});
</script>
</body>
</html>
输出：
在此输入图片描述
希望我的 x 轴表现如下：
https://www.highcharts.com/demo/highcharts/line-boost
请帮忙。
要使 x 轴的行为与您发送的示例相同，您不能使用类别，而是以以下格式提供 x 和 y 值作为 series.data：
series: [{
data: [{
x: 1481065200000,
y: 39966.31
}, {
x: 1481068800000,
y: 38054.98
}, ...]
}]
演示：https://jsfiddle.net/BlackLabel/k7ubpj8e/
API：https://api.highcharts.com/highcharts/series.line.data