Highcharts Stock混合多系列时底部X轴24小时刻度显示异常

问题根因 #

• Highcharts Stock 时间轴默认开启ordinal序数模式，会自动跳过无数据的时间区间、动态调整刻度密度，手动设置的tickInterval会被该默认逻辑覆盖
• 未显式指定时间标签格式化规则，组件会自动根据刻度跨度选择时间格式，无法固定24小时制展示
• 主X轴、顶部副X轴、导航器X轴配置未完全对齐，且未关闭缩放、滚动条相关的自适应刻度逻辑，导致底部X轴刻度渲染不符合预期

修复方案 #

按以下规则调整配置即可实现上下X轴统一逐小时24小时制刻度展示：

• 所有X轴（底部主X轴、顶部副X轴、navigator导航器X轴）统一设置ordinal: false，关闭序数轴自动调整刻度的特性
• 所有X轴固定tickInterval: 3600 * 1000（1小时间隔），同时配置dateTimeLabelFormats.hour: '%H:%M'强制24小时制时间格式
• 关闭X轴自动刻度计算、缩放能力，固定时间范围为当日0点到23点59分59秒
• 关闭滚动条关联的X轴自适应逻辑，避免滚动条配置覆盖X轴刻度规则
• 所有系列显式绑定到对应X轴，避免多X轴下系列渲染偏移导致刻度计算异常

修正后完整核心代码 #

Highcharts.stockChart('container', {
  chart: {
    animation: {
      duration: 1000,
    },
  },
  title: { text: 'Hourly Revenues for Today' },
  // 导航器X轴配置对齐
  navigator: {
    xAxis: {
      ordinal: false, // 关闭序数轴
      startOnTick: true,
      endOnTick: true,
      type: 'datetime', 
      tickAmount: 24,
      tickInterval: 3600 * 1000, // 1小时间隔
      min: Date.UTC(2022, 5, 29, 0, 0, 0),
      max: Date.UTC(2022, 5, 29, 23, 59, 59),
      dateTimeLabelFormats: {
        hour: '%H:%M' // 强制24小时制
      }
    }
  },
  // 关闭滚动条自适应
  scrollbar: {
    xAxis: {
      ordinal: false
    }
  },
  xAxis: [
    {
      ordinal: false, // 关闭序数轴
      type: 'datetime', 
      tickAmount: 24,
      tickInterval: 3600 * 1000, // 1小时间隔
      startOnTick: true,
      endOnTick: true,
      min: Date.UTC(2022, 5, 29, 0, 0, 0),
      max: Date.UTC(2022, 5, 29, 23, 59, 59),
      zoomEnabled: false,
      dateTimeLabelFormats: {
        hour: '%H:%M' // 强制24小时制
      }
    },
    {
      ordinal: false, // 关闭序数轴
      type: 'datetime',
      tickAmount: 24,
      tickInterval: 3600 * 1000, // 1小时间隔
      min: Date.UTC(2022, 5, 29, 0, 0, 0),
      max: Date.UTC(2022, 5, 29, 23, 59, 59),
      opposite: true,
      dateTimeLabelFormats: {
        hour: '%H:%M' // 强制24小时制
      }
    },
  ],
  yAxis: {
    min: 0,
    title: {
      text: 'Revenues in USD',
    },
  },
  legend: {
    enabled: false,
  },
  tooltip: {
    pointFormat: 'Revenues today: <b>{point.y:,.0f} </b>',
  },
  credits: { enabled: false },
  series: [
    {
      type: 'line',
      name: 'Revenues today',
      xAxis: 0,
      color: 'red',
      data: [
        { x: Date.UTC(2022, 5, 29, 13, 4, 5), y: 23 },
        { x: Date.UTC(2022, 5, 29, 18, 4, 5), y: 20 },
      ],
    },
    {
      type: 'column',
      name: 'Revenues today',
      xAxis: 0,
      getExtremesFromAll: true,
      maxPointWidth: 10,
      data: [
        { x: Date.UTC(2022, 5, 29, 22, 4, 5), y: 20 },
      ],
    },
    {
      type: 'column',
      name: 'Revenues today',
      xAxis: 0,
      color: 'red',
      visible: false,
      data: [
        { x: Date.UTC(2022, 5, 29, 0, 0, 0), y: 23 },
        { x: Date.UTC(2022, 5, 29, 23, 59, 59), y: 20 },
      ],
    },
    {
      type: 'scatter',
      name: 'Revenues today',
      xAxis: 0,
      data: [
        { x: Date.UTC(2022, 5, 29, 5, 4, 5), y: 23 },
        { x: Date.UTC(2022, 5, 29, 6, 4, 5), y: 20 },
      ],
    },
  ],
  plotOptions:{
    series: {
      pointStart: Date.UTC(2022, 5, 29, 0, 0, 0),
      pointInterval: 3600 * 1000,
    }
  },
  exporting: {
    buttons: {
      contextButton: {
        menuItems: [
          'viewFullscreen',
          'printChart',
          'separator',
          'downloadPDF',
          'downloadPNG',
          'downloadJPEG',
          'downloadSVG',
          'separator',
          'downloadXLS',
          'downloadCSV',
        ],
      },
    },
  },
});

配置调整后，上下X轴会固定从0点到23点每小时生成一个刻度，时间标签统一展示为24小时制格式，不会再自动生成不符合要求的刻度值。

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