如何借助custom属性在Highcharts Gantt中自定义yAxis标签？

问题原因 #

你原来的代码this.chart.series[this.pos].custom.size无法正常运行，是因为this.pos是y轴类别的索引，而series的排列顺序不一定和y轴类别顺序完全对应，直接通过索引取series会导致匹配错误。

解决方案 #

通过y轴标签的this.value（即类别名称）匹配对应的series，再读取其custom属性：

完整配置示例 #

Highcharts.ganttChart('container', {
  yAxis: {
    categories: ['1', '2'],
    labels: {
      formatter: function() {
        // 根据类别名称找到对应的series
        const targetSeries = this.chart.series.find(series => series.name === this.value);
        // 返回拼接后的标签文本
        return `${this.value} ${targetSeries?.custom?.size || ''}`;
      }
    }
  },
  series: [
    {
      name: '1',
      custom: { size: 'small' },
      data: [{
        name: 'Task 1',
        start: Date.UTC(2024, 0, 1),
        end: Date.UTC(2024, 0, 5)
      }]
    },
    {
      name: '2',
      custom: { size: 'large' },
      data: [{
        name: 'Task 2',
        start: Date.UTC(2024, 0, 3),
        end: Date.UTC(2024, 0, 8)
      }]
    }
  ]
});

关键说明 #

• this.value在y轴label.formatter中代表当前标签对应的类别名称，和series的name字段对应，通过find方法可以精准匹配到目标series。
• 使用可选链操作符?.避免因series未找到导致的报错，增强代码健壮性。

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