Highcharts桑基图如何设置节点文本加粗及按图示计算显示百分比

• 节点标签加粗：直接在桑基图节点的dataLabels样式配置中设置fontWeight: 'bold'即可，属于Highcharts原生支持配置，无需额外操作DOM。
• 百分比计算展示：按展示规则，百分比计算逻辑为当前节点/链路的流量值 ÷ 所属分支根节点总流量值 × 100%，结果保留1位小数拼接在标签文本后。直接在数据标签的formatter回调中完成计算即可，无需提前对原始数据做预处理。

核心配置代码如下：

Highcharts.chart('chartContainer', {
  chart: { type: 'sankey' },
  plotOptions: {
    sankey: {
      // 链路标签配置
      dataLabels: {
        enabled: true,
        formatter: function() {
          const point = this.point;
          // 取当前链路所属根节点的总流量作为计算基数
          const rootTotal = getRootNodeTotal(point.fromNode);
          const percent = ((point.weight / rootTotal) * 100).toFixed(1);
          return `${point.name} ${percent}%`;
        }
      },
      // 节点配置
      node: {
        dataLabels: {
          enabled: true,
          // 节点标签加粗配置
          style: {
            fontWeight: 'bold'
          },
          formatter: function() {
            const point = this.point;
            // 取当前节点所属根节点总流量作为基数
            const rootTotal = getRootNodeTotal(point);
            const percent = ((point.sum / rootTotal) * 100).toFixed(1);
            return `${point.name} ${percent}%`;
          }
        }
      }
    }
  },
  series: [{
    keys: ['from', 'to', 'weight'],
    data: [/* 填入业务对应的桑基图源数据 */]
  }]
});

// 工具方法：向上溯源找到当前节点所属根节点的总流量
function getRootNodeTotal(node) {
  let current = node;
  // 循环向上查找无入链的根节点
  while (current.linksFrom.length > 0) {
    current = current.linksFrom[0].fromNode;
  }
  return current.sum;
}

提示：如果业务场景要求全链路统一用最上游所有入口的总流量做计算基数，只需要把getRootNodeTotal的返回值替换为全量根节点的流量总和即可。

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