对于下面的代码段,
const data = [
{"from":"step2_FRANCE","to":"step3_SPAIN","weight": 2},
{"from":"step3_SPAIN","to":"step4_PORTUGAL","weight":2},
{"from":"step2_PORTUGAL","weight":1, to: "step3_SPAIN" },
{"from":"step2_FRANCE","weight":1},
{"from":"step2_SPAIN","weight":1},
{"from":"step2_ENG","weight":1},
{"from":"step2_PORTUGAL","weight":1, to: "step3_SPAIN"},
{"from":"step2_FRANCE","weight":1},
];
const nodes = [
{"id":"step2_PORTUGAL","name":"Portugal","column":1, "color":"#ede042"},
{"id":"step2_FRANCE","name":"France","column":1, "color":"#cb65dc"},
{"id":"step2_SPAIN","name":"Spain","column":1,, "color":"#6493f1"},
{"id":"step2_ENG","name":"England", "column":1, "color":"#6ed4eb"},
{"id":"step3_SPAIN","name":"Spain","column":2, "color":"#6493f1"},
{"id":"step4_PORTUGAL","name":"Portugal","column":3, "color":"#ede042"}
];
Highcharts.chart('container', {
title: {
text: 'Highcharts Sankey Diagram'
},
accessibility: {
point: {
valueDescriptionFormat: '{index}. {point.from} to {point.to}, {point.weight}.'
}
},
series: [{
data,
nodes,
type: 'sankey',
name: 'Sankey demo series'
}]
});
在nodes
选项中,还显示了列号和名称。
如果注释掉Step2..
中的一个节点,则会得到部分正确的图。
const nodes = [
{"id":"step2_PORTUGAL","name":"Portugal","column":1,"color":"#ede042"},
// {"id":"step2_FRANCE","name":"France","column":1, "color":"#cb65dc"},
{"id":"step2_SPAIN","name":"Spain","column":1, "color":"#6493f1"},
{"id":"step2_ENG","name":"England", "column":1, "color":"#6ed4eb"},
{"id":"step3_SPAIN","name":"Spain","column":2, "color":"#6493f1"},
{"id":"step4_PORTUGAL","name":"Portugal","column":3, "color":"#ede042"}
];
我不明白为什么图表会这样显示。我猜我传递数据/节点的方式出了问题。如果有人可以指出正确的方向,我将不胜感激。
从节点选项中的0开始设置列可解决此问题。
演示:https://jsfiddle.net/BlackLabel/fkshbmdv/
const nodes = [{
"id": "step2_PORTUGAL",
"name": "Portugal",
//"column": 0,
"color": "#ede042"
}, ...
];
在这种情况下,实际上不需要使用列属性:https://jsfiddle.net/BlackLabel/n53Ljcgd/
API:https://api.highcharts.com/highcharts/series.sankey.nodes.column