Почему sankey chart highcharts иногда объединяет несколько узлов с одинаковым именем узла, но с разными идентификаторами в один и скрывает линии? - PullRequest
0 голосов
/ 07 мая 2020

Для приведенного ниже фрагмента

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 (идентификаторы с шагом 2 _ ..)
  2. Испания в столбце 2 (идентификаторы с шагом 3 _ ..)
  3. Португалия в столбце 3 (идентификаторы с шагом 4 _ ..)

В опции 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

Я не могу понять, почему диаграмма ведет себя таким образом. Я предполагаю, что что-то не так с тем, как я передаю данные / узлы. Я очень признателен, если кто-нибудь может указать мне правильное направление.

1 Ответ

1 голос
/ 07 мая 2020

Начальная установка столбцов с 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...