如何为Highcharts Sankey Chart（桑基图）添加每列对应的自定义标签

我正在使用Highcharts库开发桑基图（Sankey Chart）可视化效果，当前的图表展示效果如下：

我需要为上图中高亮标注的每一列添加对应标签，最初由于桑基图默认无x、y轴，使用formatter没找到可行实现方案。目前我已经可以成功渲染x、y轴，但仍无法将标签精准放置在每一列的正下方，原有实现代码如下：

const data = [{
    "from": "step1_x",
    "to": "step2_x",
    "weight": 100
  },
  {
    "from": "step1_x",
    "to": "step2_y",
    weight: 35
  },
  {
    "from": "step1_x",
    "to": "step2_z",
    weight: 50
  },
    {
    "from": "step1_y",
    "to": "step2_y",
    weight: 55
  },
  {
    "from": "step1_y",
    "to": "step2_x",
    weight: 20
  },
  {
    "from": "step1_y",
    "to": "step2_z",
    weight: 30
  },
  {
    "from": "step1_z",
    "to": "step2_y",
    weight: 18
  },
  {
    "from": "step1_z",
    "to": "step2_x",
    weight: 15
  },
  {
    "from": "step1_z",
    "to": "step2_z",
    weight: 40
  },
  {
    "from": "step2_x",
    "to": "step3_x",
    "weight": 50
  },
  {
    "from": "step2_x",
    "to": "step3_y",
    weight: 55
  },
  {
    "from": "step2_x",
    "to": "step3_z",
    weight: 30
  },
    {
    "from": "step2_y",
    "to": "step3_y",
    weight: 90
  },
  {
    "from": "step2_y",
    "to": "step3_x",
    weight: 40
  },
  {
    "from": "step2_y",
    "to": "step3_z",
    weight: 51
  },
  {
    "from": "step2_z",
    "to": "step3_y",
    weight: 30
  },
  {
    "from": "step2_z",
    "to": "step3_x",
    weight: 40
  },
  {
    "from": "step2_z",
    "to": "step3_z",
    weight: 90
  },
  
];

const nodes = [{
    "id": "step1_x",
    "name": "X",
    color: 'black'
  }, {
    "id": "step2_x",
    "name": "X",
    color: 'black',
  },
  {
    "id": "step3_x",
    "name": "X",
     color: 'black',
  },
  {
    "id": "step1_y",
    "name": "Y",
    color: '#f15c80'
  }, {
    "id": "step2_y",
    "name": "Y",
        color: '#f15c80'
  }, {
    "id": "step3_y",
    "name": "Y",
        color: '#f15c80'
  }, {
    "id": "step1_z",
    "name": "Z",
    color: '#f7a35c'
  }, {
    "id": "step2_z",
    "name": "Z",
        color: '#f7a35c'
  }, {
    "id": "step3_z",
    "name": "Z",
     color: '#f7a35c'
  },

];


Highcharts.chart('container', {
  title: {
    text: 'Highcharts Sankey Diagram'
  },
  
  yAxis: {
        labels: {
    enabled: true,
    formatter:function () {
    return '1231';
    }
    }
  },

  series: [{
    data: data,
       nodes: nodes,
    type: 'sankey',
    name: 'Sankey demo series',
    nodeWidth: 20
  }],
  plotOptions: {
    sankey: {
      dataLabels: {
        overflow: 'allow',
crop: true,
        enabled: true,
                formatter: function () {
            return this.point.weight;
        }
      }
    }
  }
});

具体实现方法 #

完全基于Highcharts原生配置实现，无需额外操作DOM，修改点如下：

1. 移除原有无效的yAxis配置，新增xAxis配置，自定义刻度位置和标签逻辑：

xAxis: {
  visible: true,
  // 按列的数量配置对应刻度索引，此处3列对应[0,1,2]
  tickPositions: [0, 1, 2],
  labels: {
    formatter: function() {
      // 替换为你需要显示的列标签文本
      const columnLabels = ['第一阶段', '第二阶段', '第三阶段'];
      return columnLabels[this.value];
    },
    align: 'center',
    // 调整垂直偏移量，控制标签和列底部的间距
    y: 20,
    style: {
      fontSize: '14px'
    }
  },
  // 隐藏不需要的轴线和刻度线
  lineWidth: 0,
  tickLength: 0
}

2. 在chart配置中增加底部边距，预留标签显示空间：

chart: {
  marginBottom: 80
},

修改后标签会自动对齐每一列的水平中心，适配不同尺寸的图表。

内容的提问来源于stack exchange，提问作者Sai Babu B