为什么highcharts sankey图表有时将具有相同节点名称但ID不同的多个节点合并为一个并隐藏线?

问题描述 投票:0回答:1

对于下面的代码段,

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'
  }]
});

我得到这样的输出:Incorrect sankey chart output我期待中:

  1. 第1列中的法国,葡萄牙,西班牙和英格兰(带有step2_ ..的ID)
  2. 西班牙在第2列中(带有step3_ ..的ID)
  3. 葡萄牙在第3栏中(带有step4_ ..的ID)

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"}
];

Partially correct sankey chart

我不明白为什么图表会这样显示。我猜我传递数据/节点的方式出了问题。如果有人可以指出正确的方向,我将不胜感激。

javascript highcharts sankey-diagram
1个回答
1
投票

从节点选项中的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

© www.soinside.com 2019 - 2024. All rights reserved.