如何在Highcharts中为日期时间轴设置明确的轴范围？

我有一个带日期时间x轴的Highcharts散点图，希望无论图表宽度如何，都能明确设置x轴的最小值和最大值。在下方示例中，我将xAxis.min设置为01/05/2023，但图表渲染时的最小值却是01/04/2023，该最小值似乎会随图表宽度变化。请问有没有办法能设置轴的特定起止值（同时使用startOnTick/endOnTick）且不受图表宽度影响？

原代码示例 #

JavaScript #

let start = "05 Jan 2023 00:00:00 GMT"; // x-axis start
let end = "12 Jan 2023 00:00:00 GMT"; // x-axis end

Highcharts.chart("trendPlot", {
  accessibility: { enabled: false },
  chart: {
    type: "scatter",
  },
  xAxis: {
    type: "datetime",
    min: Date.parse(start),
    max: Date.parse(end),
    startOnTick: true,
    endOnTick: true,
    labels: {
      format: "{value:%m/%d/%y}",
      enabled: true,
    },
  },
  series: [{
    "data": [
      [1672894800000, 1]
    ]
  }]
});

CSS #

#trendPlot {
  width: 500px;
}

HTML #

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="trendPlot"></div>

问题出在startOnTick/endOnTick的特性结合Highcharts自动计算刻度间隔的逻辑：当图表宽度变化时，Highcharts会自动调整刻度间隔以优化显示，导致轴的起止点会对齐到新的刻度线，偏离你设置的min/max值。要解决这个问题，需要强制固定刻度规则，同时确保轴严格对齐你设置的起止时间：

• 关闭ordinal模式：散点图的datetime轴默认开启ordinal: true，会按数据点顺序排列而非实际时间间隔，关闭后才能保证时间轴连续且严格按时间刻度渲染。
• 手动指定刻度间隔：明确设置tickInterval（比如按天设置为24 * 3600 * 1000），避免Highcharts自动调整间隔。
• 取消轴的留白：设置minPadding: 0和maxPadding: 0，确保轴的起止点紧贴你设置的min/max。
• 保留startOnTick/endOnTick：此时轴的起止会对齐到你指定的刻度间隔对应的刻度，也就是你设置的min/max位置。

修改后的代码 #

let start = "05 Jan 2023 00:00:00 GMT"; // x-axis start
let end = "12 Jan 2023 00:00:00 GMT"; // x-axis end

Highcharts.chart("trendPlot", {
  accessibility: { enabled: false },
  chart: {
    type: "scatter",
  },
  xAxis: {
    type: "datetime",
    ordinal: false, // 关闭ordinal模式，确保时间轴连续
    min: Date.parse(start),
    max: Date.parse(end),
    startOnTick: true,
    endOnTick: true,
    tickInterval: 24 * 3600 * 1000, // 固定刻度间隔为1天
    minPadding: 0, // 取消左侧留白
    maxPadding: 0, // 取消右侧留白
    labels: {
      format: "{value:%m/%d/%y}",
      enabled: true,
    },
  },
  series: [{
    "data": [
      [1672894800000, 1]
    ]
  }]
});

这样修改后，无论图表宽度如何调整，x轴的起止都会严格保持你设置的01/05/2023和01/12/2023，同时刻度线也会正确对齐这些时间点。

内容的提问来源于stack exchange，提问作者JoshG