如何在Highcharts中使用对象数组传递系列数据时显示X轴日期？

我帮你排查了下问题，核心原因出在X轴的minTickInterval配置上。你的数据时间跨度只有约10天（从2022年4月5日到4月14日），但你设置了minTickInterval: 28 * 24 * 3600 * 1000（也就是28天），这个间隔远大于你的数据范围，导致Highcharts无法生成符合要求的刻度点，所以X轴没有显示任何日期标签。

下面是具体的修复步骤和优化建议：

1. 调整X轴的刻度间隔 #

把minTickInterval修改为符合你数据密度的值，比如1天（24小时）：

xAxis: {
  type: 'datetime',
  crosshair: true,
  // 调整为1天的间隔，根据数据密度可再细化（比如半天）
  minTickInterval: 24 * 3600 * 1000, 
  labels: {
    formatter: function () {
      return `${moment(this.value).format('MMM YYYY')}`;
    },
  },
},

如果希望更灵活，也可以直接移除minTickInterval，让Highcharts自动根据数据范围计算合适的刻度间隔。

2. 确保X轴配置正确 #

因为你使用的是datetime类型的X轴，不需要设置categories（你的代码里已经注释掉了，这部分是对的）。Highcharts会自动从series.data里的x字段获取时间戳来生成刻度。

3. 优化Tooltip的日期获取 #

你的tooltip里用xAxisCategoriesNumber[index]来获取日期，其实可以直接用this.value（也就是当前点的x值），更简洁：

tooltip: {
  useHTML: true,
  formatter:function () {
    const point = this.point;
    const series = this.point.series;
    const date = moment(this.value); // 直接使用当前点的x值
    return !(this.point as any).disabled && `
      <div>${date.format('DD MMMM hh:mm')}, ${date.format('YYYY')}</div>
      <div>${series.name}: ${point.y}${disableLabelsPercentage ? '' : '%'}</div>
    `;
  },
},

4. 优化Series数据的生成（可选） #

你的重构代码里，series.data的生成方式有点冗余，不需要通过xAxisCategoriesNumber.map来取值，直接使用原config里的data即可：

const series = config.series.map((object: any, cfgIndex: number) => ({ 
  name: object?.name || (cfgIndex === 0 ? 'Reach' : 'Engagement'),
  type: 'areaspline',
  color: colors[cfgIndex] || colors[0],
  lineWidth: 1.2,
  data: object.data, // 直接使用原数据，不需要额外map
}));

做完这些调整后，X轴应该就能正常显示日期了。另外，如果你希望X轴标签显示更精细的日期格式（比如具体到日），可以修改labels.formatter里的moment格式字符串，比如moment(this.value).format('DD MMM YYYY')。

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