Highcharts配置datetime类型x轴固定刻度后日期标签不显示如何解决

问题根因 #

Highcharts datetime类型x轴的tickPositions配置仅接受毫秒级时间戳数值，你当前传入的是JS Date对象，框架无法识别有效刻度位置，因此没有渲染对应的x轴标签。

解决方案 #

按以下两步调整配置即可实现预期效果：

1. 将tickPositions和系列数据中所有Date对象转换为毫秒时间戳，可直接调用Date实例的getTime()方法实现
2. 保留自定义标签格式化逻辑即可正常输出Mar 2018格式的标签

完整可运行配置示例 #

xAxis: {
  type: "datetime",
  tickPositions: [
    new Date('2018-03-01').getTime(),
    new Date('2019-03-01').getTime(),
    new Date('2020-03-01').getTime(),
    new Date('2021-03-01').getTime(),
  ],
  labels: {
    formatter: function () {
      return Highcharts.dateFormat('%b %Y', this.value);
    }
  }
}

// 系列数据同步调整
series: [{
  data: [
    { x: new Date('2018-03-01').getTime(), y: 2.2 },
    { x: new Date('2019-03-01').getTime(), y: 3.3 },
    { x: new Date('2020-03-01').getTime(), y: 3.2 },
    { x: new Date('2021-03-01').getTime(), y: 3.8 },
  ]
}]

过往尝试未生效的原因说明 #

• 直接给tickPositions传Date对象，框架无法识别为有效刻度坐标，因此不会渲染对应标签，就算配置了格式化逻辑也没有生效对象
• 使用Date.UTC时如果没有注意月份是从0开始计数的规则，会生成错误的时间戳，导致数据和刻度位置不匹配，例如2018年3月对应的UTC写法为Date.UTC(2018, 2, 1)，如果填了月份3就会生成4月的时间戳，自然和数据对应不上

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