如何在Highcharts的X轴正确显示月份与年份？

问题根源 #

你设置的xAxis.type: 'year'是错误的——Highcharts并不支持'year'这个轴类型，这导致轴无法识别时间数据，转而显示默认的索引值（0、1、2...）。

修正方案 #

1. 修改轴类型为'time'：这是Highcharts处理时间序列数据的正确轴类型
2. 确保数据为时间格式：X轴数据需要是毫秒级时间戳或Date对象，而非普通字符串或数字
3. 配置合适的时间标签格式：结合tickInterval控制刻度间隔，确保显示每月的标签

修改后的X轴配置示例 #

xAxis: {
  type: 'time',
  tickInterval: 30 * 24 * 3600 * 1000, // 近似每月间隔，适配不同月份天数
  dateTimeLabelFormats: {
    month: '%b %Y' // 格式化为「Apr 2023」样式
  },
  labels: {
    align: 'center' // 可选，优化标签对齐效果
  }
}

额外可选方案（分类轴模式） #

如果你的数据是固定的月份列表，也可以直接使用分类轴：

xAxis: {
  type: 'category',
  categories: ['Apr 2023', 'May 2023', 'Jun 2023']
}

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