更改 highcharts sankey 图表的方面答案

【问题标题】：Change aspect of highcharts sankey chart更改 highcharts sankey 图表的方面
【发布时间】：2022-06-10 20:04:55
【问题描述】：

我需要从 highcharts.js 构建一个 sankey 图表，看起来像示例图像中的那个，基本上我尝试做的是改变图表中一些流和节点的形状和位置。由于我在互联网上找不到任何解决方案，因此将不胜感激。

Highcharts.chart('container', {...});

codepen sankey code

sankey exemple image

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

关于sankey这个系列有一些限制，可以使用nodeWidth、nodePadding和minLinkWidth进行调整。

节点的生成使得进出节点的总重量可视化。节点是 Point 的实例，可从 series.nodes 数组中获得。节点的宽度可以通过 nodeWidth 选项设置，节点之间的 padding 可以通过 nodePadding 设置。

https://www.highcharts.com/docs/chart-and-series-types/sankey-diagram#nodes

【讨论】：

是的，我知道关于内边距和宽度，但我无法通过内边距或宽度实现所需的流动（曲线）形状，示例图像是用 d3.js 制作的，所以我正在考虑我们可以在 highcharts 中获得相同的结果。
剩下的就是让你匹配那个外观，但它不会完全一样。

【解决方案2】：

这是一个丑陋的 hack，可以满足您的需求。我没有时间正确完成它，但它有效。

你现在可以做的是设置节点的传入和传出选项，并使用vertical-horizontal-offset。

nodes=[
{id:'import'    ,column:1, offsetVertical:-100 ,offsetHorizontal:-20},
{id:'production',column:0, offsetVertical:22 ,offsetHorizontal:0},
{id:'total'     ,column:2, offsetVertical:0 ,offsetHorizontal:0},
{id:'loss'      ,column:3, offsetVertical:50 ,offsetHorizontal:0},
{id:'final'     ,column:5, offsetVertical:-10 ,offsetHorizontal:0},
{id:'export'    ,column:4, offsetVertical:50 ,offsetHorizontal:0},

]

Highcharts.chart('container', {
  chart: {
    height: (9/16 * 90 )+ "%"
  },
  series: [{
    keys: ['from', 'to', 'weight'],
    data: [{
      from: 'import',
      to: 'total',
      weight: 80,
      incoming: true
    }, {
      from: 'production',
      to: 'total',
      weight: 20,
    }, {
      from: 'total',
      to: 'final',
      weight: 56,
    }, {
      from: 'total',
      to: 'export',
      weight: 17,
      outgoing: true
    }, {
      from: 'total',
      to: 'loss',
      weight: 27,
      outgoing: true
    }],
    dataLabels: {
      nodeFormat: '{point.name}: {point.sum}%',
      padding: 20,
      style: {
        fontSize: '0.8em'
      }
    },
    nodes: nodes,
    type: 'sankey',
    name: 'Energy',
    linkOpacity: 1,
  }]

});

这是小提琴link

我直接更改了 sankey.js 并使用了 proto translate 选项。主要变化：

重绘所有的 SVG 路径，除了循环链接
用描边宽度替换 SVG 路径填充
顶部对齐节点而不是中心

【讨论】：