我需要从highcharts.js建立一个sankey图表看起来像一个在示例图像,基本上我试图做的是改变形状和位置的一些流程和节点在图表中.帮助将是apreciated,因为我找不到任何解决方案在互联网上.
Highcharts.chart('container', {...});
codepen sankey codesankey exemple image
xmakbtuz1#
与sankey有关的这个系列有一些限制,要调整你可以使用nodeWidth,nodePadding和minLinkWidth。
https://www.highcharts.com/docs/chart-and-series-types/sankey-diagram#nodes
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选项。主要修改:
2条答案
按热度按时间xmakbtuz1#
与sankey有关的这个系列有一些限制,要调整你可以使用nodeWidth,nodePadding和minLinkWidth。
https://www.highcharts.com/docs/chart-and-series-types/sankey-diagram#nodes
kzipqqlq2#
这里有一个丑陋的黑客,可以做你需要的。我没有时间适当地完成它,但它的工作。
你现在可以做的是设置节点的传入和传出选项,并使用垂直-水平-偏移。
这是小提琴link
我直接修改了sankey.js,还使用了proto translate选项。主要修改: