Highcharts 甘特图如何为分组数据左侧新增自定义列

要实现甘特图分组数据左侧新增信息列，你可以通过多y轴并行配置完成，核心实现步骤如下：

• 新增前置自定义y轴
  甘特图的左侧列表本质是多组y轴并行渲染，在原有y轴配置前新增一个独立轴，通过width属性定义列宽，gridLineWidth: 0隐藏多余分隔线，title设置列头名称，同时配置linkedTo属性指向原有数据轴的索引，确保自定义列和右侧数据行的层级、折叠逻辑完全同步，不会出现错位。
• 自定义内容渲染逻辑
  先在series的data数组中给每个数据项（含父级分组项）新增自定义字段存储你要展示的信息，再给新增y轴的labels.formatter回调函数编写逻辑，从当前point的配置项中读取自定义字段值返回即可。
• 调整原有轴的偏移量
  给原有的第一个数据轴设置offset属性，值等于自定义列的宽度，避免两列内容重叠。

核心实现代码示例：

Highcharts.ganttChart('container', {
  yAxis: [
    // 新增的左侧自定义列
    {
      width: '15%',
      offset: 0,
      gridLineWidth: 0,
      linkedTo: 1, // 关联索引为1的原有数据轴
      title: {
        text: '自定义列'
      },
      labels: {
        align: 'left',
        formatter: function () {
          // 读取数据项的自定义字段
          return this.point?.options?.customColumnVal ?? ''
        }
      }
    },
    // 原有的数据列（原有配置仅需修改offset即可）
    {
      width: '35%',
      offset: '15%', // 偏移量等于自定义列宽度
      labels: {
        align: 'left'
      },
      title: {
        text: '任务名称'
      }
    }
  ],
  series: [{
    data: [
      {
        id: 'task1',
        name: '分组任务1',
        customColumnVal: '分组自定义内容', // 新增自定义字段
        start: Date.UTC(2024, 0, 1),
        end: Date.UTC(2024, 0, 10)
      },
      {
        id: 'task1-1',
        parent: 'task1',
        name: '子任务1',
        customColumnVal: '子项自定义内容', // 子项也同步新增自定义字段
        start: Date.UTC(2024, 0, 1),
        end: Date.UTC(2024, 0, 3)
      }
      // 其余数据项按上述结构补充自定义字段即可
    ]
  }]
})

如果需要调整列的样式，可以通过labels.style配置字体、颜色，也可以给列添加className后通过css自定义样式。

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