Highcharts桑基图节点重排

Question

Highcharts.chart('container', {
    chart: {
      width: width,
      height: height
    },
    series: [{
      keys: ['from', 'to', 'weight'],
      data: [
        ['a', 'd', 1],
        ['b', 'c', 1],
        ['c', 'd', 1]
      ],
      type: 'sankey'
    }]
  });
});

当绘制两个流程 a->d 和 b->c->d 时，Highcharts 给出了一个奇怪的节点排列，直到页面调整大小或图表重排：

实际：

预计：

演示：https://jsfiddle.net/applewil/ezjfarh4/6/

为什么我需要调整大小或重排以获得预期的排列？

Answer 1

此问题与 Highcharts GitHub 上报告的问题有关：https://github.com/highcharts/highcharts/issues/8218

作为解决方法，您可以在加载图表后调用 reflow。

    chart: {
        events: {
            load: function() {
                this.reflow();
            }
        }
    }

现场演示： https://jsfiddle.net/BlackLabel/vdLy2a0z/

API参考：https://api.highcharts.com/class-reference/Highcharts.Chart#reflow

Highcharts桑基图节点重排

Highcharts sankey diagram node rearrangement

highcharts

sankey-diagram