Highcharts Sankey Diagram桑基图nodeFormat无法显示point.percentage百分比问题

问题原因 #

Highcharts 桑基图默认的 point.percentage 字段计算逻辑为当前节点流量相对于上下游关联节点的流量占比，和你需要的以全局指定总和为分母的自定义占比规则不匹配，因此直接配置 nodeFormat: '{point.name} {point.percentage}%' 无法得到预期结果。

解决方案 #

将 nodeFormat 配置替换为 nodeFormatter 回调函数，在回调中手动实现你定义的百分比计算逻辑即可，参考配置如下：

// 定义全局计算分母，可根据实际业务逻辑动态计算
const dataSum = 147;

Highcharts.chart('container', {
  series: [{
    type: 'sankey',
    // 你原有的桑基图数据
    data: [
      ['China', 'US', 53],
      ['China', 'EU', 94]
    ],
    dataLabels: {
      enabled: true,
      nodeFormatter: function() {
        // 按规则计算百分比，取整后拼接返回标签内容
        const percentage = Math.round(this.point.sum / dataSum * 100);
        return `${this.point.name} >> ${this.point.sum} (${percentage})%`;
      }
    }
  }]
});

如果需要动态获取全局分母，可在图表初始化前遍历桑基图所有根节点（无流入流量的节点）的sum值，取对应值作为 dataSum 即可适配数据动态变更的场景。

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