更改highcharts sankey图表的纵横比

tvmytwxo  于 2022-11-10  发布在  Highcharts
关注(0)|答案(2)|浏览(202)

我需要从highcharts.js建立一个sankey图表看起来像一个在示例图像,基本上我试图做的是改变形状和位置的一些流程和节点在图表中.帮助将是apreciated,因为我找不到任何解决方案在互联网上.

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

codepen sankey code
sankey exemple image

xmakbtuz

xmakbtuz1#

与sankey有关的这个系列有一些限制,要调整你可以使用nodeWidthnodePaddingminLinkWidth

  • 生成节点的目的是使进出节点的总权重可视化。节点是Point的示例,可从series.nodes数组中获得。节点的宽度可以使用nodeWidth选项设置,节点之间的填充可以使用nodePadding设置。*

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

kzipqqlq

kzipqqlq2#

这里有一个丑陋的黑客,可以做你需要的。我没有时间适当地完成它,但它的工作。
你现在可以做的是设置节点的传入和传出选项,并使用垂直-水平-偏移。

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路径填充
  • 顶端对齐节点而不是中心对齐

相关问题