Highcharts如何设置x轴显示真实时间刻度，保留无数据日期占位

解决方案 #

你当前出现时间点等间距的核心原因是x轴使用了默认的category类型，该类型下所有标签会被作为普通文本处理，自动分配等宽间距，和实际时间差无关。你可以按以下步骤配置实现按真实时间间隔展示：

1. 修改x轴类型为时间类型
   将x轴的type属性设置为datetime，同时删除原配置中写死的categories日期数组，否则时间类型不会生效。
2. 调整数据格式
   序列的data不再单独绑定x轴标签，改为每个数据点为[时间戳, y轴数值]的结构，无数据的日期不需要额外添加占位记录，Highcharts会自动根据时间戳差值计算x轴位置。
3. 可选：固定刻度间隔
   如果需要强制显示每天的刻度（包括无数据的日期），可以配置xAxis.tickInterval为86400000（即一天的毫秒数），再配合标签格式配置实现你想要的1. Mar样式。

以下是参考配置片段：

Highcharts.chart('container', {
  xAxis: {
    type: 'datetime',
    tickInterval: 24 * 3600 * 1000, // 按天显示刻度，可按需调整为周、月间隔
    labels: {
      format: '{value:%e. %b}' // 日期显示格式匹配你的需求
    }
  },
  series: [{
    type: 'line',
    data: [
      [Date.UTC(2024, 2, 1), 11], // 月份从0开始计数，2对应3月
      [Date.UTC(2024, 2, 7), 15],
      [Date.UTC(2024, 2, 8), 9],
      [Date.UTC(2024, 2, 10), 17]
    ]
  }]
});

配置完成后，3月1日到3月7日的间距会是3月7日到3月8日间距的6倍，完全匹配真实时间间隔，无数据的日期也会自动保留对应位置。

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