我正在尝试使用 highcharts 制作预测图表，但我的第二个系列中所有显示 12 月的日期也显示为 11 月日期。不知道为什么。
Highcharts.chart("container", {
chart: { backgroundColor: "#fbfcf8", type: "line", zoomType: "x" },
title: { text: "", align: "center" },
accessibility: { enabled: false },
credits: { enabled: false },
legend: { enabled: true, itemStyle: { color: "#000" } },
rangeSelector: { enabled: false },
navigator: { enabled: false },
scrollbar: { enabled: false },
xAxis: {
tickInterval: 2,
categories: [
"Nov 3, 2024",
"Nov 4, 2024",
"Nov 5, 2024",
"Nov 6, 2024",
"Nov 7, 2024",
"Nov 8, 2024",
"Nov 9, 2024",
"Nov 10, 2024",
"Nov 11, 2024",
"Nov 12, 2024",
"Nov 13, 2024",
"Nov 14, 2024",
"Nov 15, 2024",
"Nov 16, 2024",
"Nov 17, 2024",
"Nov 18, 2024",
"Nov 19, 2024",
"Nov 20, 2024",
"Nov 21, 2024",
"Nov 22, 2024",
"Nov 23, 2024",
"Nov 24, 2024",
"Nov 25, 2024",
"Nov 26, 2024",
"Nov 27, 2024",
"Nov 28, 2024",
"Nov 29, 2024",
"Nov 30, 2024",
"Dec 1, 2024",
"Dec 2, 2024",
"Dec 3, 2024",
"Dec 4, 2024",
"Dec 5, 2024",
"Dec 6, 2024",
"Dec 7, 2024",
"Dec 8, 2024",
"Dec 9, 2024",
"Dec 10, 2024",
"Dec 11, 2024",
"Dec 12, 2024",
"Dec 13, 2024",
"Dec 14, 2024",
"Dec 15, 2024",
"Dec 16, 2024",
"Dec 17, 2024",
"Dec 18, 2024",
],
labels: { style: { color: "#000" } },
lineColor: "#000",
lineWidth: 3,
},
yAxis: {
gridLineColor: "#fbfcf8",
lineColor: "#000",
lineWidth: 3,
labels: { style: { color: "#000" } },
title: { text: "" },
opposite: false,
},
tooltip: {
backgroundColor: "#fbfcf8",
style: { color: "#000" },
shared: true,
useHTML: true,
},
plotOptions: {
series: {
stacking: "normal",
marker: { enabled: false, states: { hover: { enabled: true } } },
},
},
series: [
{
name: "Change In Subscribers",
data: [
{ name: "Nov 4, 2024", y: 20810 },
{ name: "Nov 5, 2024", y: 22300 },
{ name: "Nov 11, 2024", y: 16110 },
{ name: "Nov 20, 2024", y: 3439 },
{ name: "Nov 13, 2024", y: 15320 },
{ name: "Nov 8, 2024", y: 0 },
{ name: "Nov 12, 2024", y: 5300 },
{ name: "Nov 10, 2024", y: 5100 },
{ name: "Nov 15, 2024", y: 1100 },
{ name: "Nov 3, 2024", y: 5110 },
{ name: "Nov 22, 2024", y: 0 },
{ name: "Nov 23, 2024", y: 310 },
{ name: "Nov 26, 2024", y: 45200 },
{ name: "Nov 19, 2024", y: 3260 },
{ name: "Nov 21, 2024", y: 29300 },
{ name: "Nov 28, 2024", y: 9530 },
{ name: "Dec 2, 2024", y: 28410 },
{ name: "Dec 1, 2024", y: 14700 },
{ name: "Nov 18, 2024", y: 7350 },
{ name: "Nov 7, 2024", y: 14410 },
{ name: "Nov 29, 2024", y: 0 },
{ name: "Nov 30, 2024", y: 3301 },
{ name: "Nov 25, 2024", y: 18540 },
{ name: "Nov 9, 2024", y: 11207 },
{ name: "Nov 16, 2024", y: 0 },
{ name: "Nov 6, 2024", y: 16220 },
{ name: "Nov 17, 2024", y: 17710 },
{ name: "Nov 14, 2024", y: 7420 },
{ name: "Nov 27, 2024", y: 16110 },
{ name: "Nov 24, 2024", y: 5510 },
{ name: "Dec 3, 2024", y: 0 },
],
color: "#6B8E23",
yAxis: 0,
},
{
name: "Forecast",
data: [
{ name: "Dec 4, 2024", y: 11534.55 },
{ name: "Dec 5, 2024", y: 11562.05 },
{ name: "Dec 6, 2024", y: 11589.55 },
{ name: "Dec 7, 2024", y: 11617.06 },
{ name: "Dec 8, 2024", y: 11644.56 },
{ name: "Dec 9, 2024", y: 11672.06 },
{ name: "Dec 10, 2024", y: 11699.56 },
{ name: "Dec 11, 2024", y: 11727.07 },
{ name: "Dec 12, 2024", y: 11754.57 },
{ name: "Dec 13, 2024", y: 11782.07 },
{ name: "Dec 14, 2024", y: 11809.58 },
{ name: "Dec 15, 2024", y: 11837.08 },
{ name: "Dec 16, 2024", y: 11864.58 },
{ name: "Dec 17, 2024", y: 11892.08 },
{ name: "Dec 18, 2024", y: 11919.59 },
],
color: "red",
dashStyle: "LongDash",
lineWidth: 2,
},
],
})<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/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>为什么我的 12 月日期显示为 11 月？
您使用了错误的 xAxis 类型 - 您应该使用日期时间类型而不是类别，请参阅 API 参考。对于类别 xAxis，点被视为离散点，而不是时间戳，看来您需要后者。
xAxis: {
tickInterval: 24 * 3600 * 1000 * 2,
type: 'datetime',
min: Date.UTC(2024, 10, 3), // optional
max: Date.UTC(2024, 11, 18), // optional
labels: { style: { color: "#000" } },
lineColor: "#000",
lineWidth: 3,
},
此外，请记住，对于日期时间 xAxis 类型，您的数据需要按升序排序才能正常工作。
演示：https://jsfiddle.net/BlackLabel/xon4evp8/
希望您会发现它很有用。