You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何让Highcharts桑基图节点权重高于其所有流出链接总和?

解决Highcharts桑基图节点值大于流出总和的问题

Highcharts桑基图的节点高度默认由其所有流入/流出链接的value总和决定,无法直接设置节点独立于链接总和的高度。要实现「Step 1」节点总value为75、仅向「Step 2」流出50的效果,需要通过添加隐藏虚拟节点的方式实现:

具体步骤:

  1. 添加虚拟节点:在节点数组中新增一个禁用显示的节点,用于承接Step1多出来的25(75-50)数值;
  2. 补充虚拟链接:添加一条从Step1指向虚拟节点的链接,value设为25;
  3. 隐藏虚拟元素:通过配置让虚拟节点和对应链接不在图表中显示。

修改后的代码示例:

Highcharts.chart('container', {
  title: {
    text: 'Sankey Diagram'
  },
  series: [{
    type: 'sankey',
    name: 'Sankey Demo',
    nodes: [
      { id: 'Step1', name: 'Step 1' },
      { id: 'Step2', name: 'Step 2' },
      { 
        id: 'hidden-node', 
        name: '', 
        enabled: false // 禁用节点显示
      }
    ],
    data: [
      { from: 'Step1', to: 'Step2', value: 50 },
      { from: 'Step1', to: 'hidden-node', value: 25 } // 虚拟链接承接剩余数值
    ]
  }]
});

关键说明:

  • 虚拟节点的enabled: false属性会让节点完全不渲染,对应的虚拟链接也会自动隐藏;
  • 如果虚拟链接仍有残留显示,可以额外配置链接样式为透明:
plotOptions: {
  sankey: {
    link: {
      color: 'transparent'
    }
  }
}

这样设置后,「Step 1」节点的高度会对应75的总value,「Step 2」节点对应50的流入value,视觉上完全符合需求。

内容的提问来源于stack exchange,提问作者Mia214

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.19 04:20:27