Highcharts Sankey图最后一列百分比计算异常求助

核心问题 #

你的代码有两个关键问题导致最后一列百分比计算失效：

1. 最后一列属于终点节点，既无linksTo（无后续节点），且现有逻辑里用linksFrom[0].toNode.sum作为分母，但toNode就是当前节点自身，计算结果无意义；若节点无任何链接时，还会因console.log(node)中node未定义返回undefined，最终Math.round(undefined)得到NaN，显示异常。
2. 百分比计算逻辑未覆盖终点节点的场景：终点节点的百分比需要基于合理的参照总和（比如父节点流入总和或根节点总金额）。

修正后的代码示例 #

假设你需要让终点节点的百分比相对于根节点总和（即最左侧节点的$450K），可以这样修改nodeFormatter函数：

nodeFormatter() {
  const { point } = this;
  // 获取根节点总和（根据你的桑基图数据结构调整，这里默认取第一个节点为根）
  const rootSum = this.chart.series[0].nodes[0].sum;
  
  let percentage;
  if (point.linksTo[0]) {
    // 中间节点：相对于父节点总和计算占比
    percentage = (point.sum / point.linksTo[0].fromNode.sum) * 100;
  } else if (point.linksFrom.length > 0) {
    // 终点节点：相对于根节点总和计算占比
    percentage = (point.sum / rootSum) * 100;
    
    // 若需基于父节点流入总和计算，可替换为以下代码：
    // const parentTotal = point.linksFrom.reduce((total, link) => total + link.fromNode.sum, 0);
    // percentage = (point.sum / parentTotal) * 100;
  } else {
    // 孤立节点默认显示0%
    percentage = 0;
  }

  return `<span style="color: black; line-height: 18px; letter-spacing: 0px; font-size: 13px;">${point.name}</span><br><span style="font-weight: 400; line-height: 15px; letter-spacing: 0px; font-size: 11px;">$${point.sum}K&nbsp;&nbsp;${Math.round(percentage)}%</span>`;
}

关键调整说明 #

• 修复了未定义的node变量，替换为合理的默认值处理；
• 针对终点节点补充了两种百分比计算逻辑，可根据业务需求选择；
• 修正了原HTML中的font-color错误（应为color），避免样式失效。

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