Highcharts桑基图方向反转问题：交换keys后渲染异常求助

要实现Highcharts桑基图在左到右（left-to-right）和右到左（right-to-left）两个方向都正常渲染，只交换series.keys里的from和to是不够的，还需要配合布局反转配置，具体步骤如下：

左到右渲染（默认正常） #

保持默认配置即可，无需额外修改：

Highcharts.chart('container', {
  series: [{
    type: 'sankey',
    keys: ['from', 'to', 'weight'],
    data: [
      ['A', 'B', 5],
      ['B', 'C', 3],
      ['A', 'D', 2]
      // 更多数据项
    ]
  }]
});

右到左渲染的正确配置 #

除了将keys的顺序改为['to', 'from', 'weight']，还需要在plotOptions.sankey中开启reversed: true，让节点布局从右往左排列，和反转后的数据流匹配：

Highcharts.chart('container', {
  plotOptions: {
    sankey: {
      reversed: true
    }
  },
  series: [{
    type: 'sankey',
    keys: ['to', 'from', 'weight'],
    data: [
      ['A', 'B', 5],
      ['B', 'C', 3],
      ['A', 'D', 2]
      // 与左到右模式相同的数据源即可
    ]
  }]
});

双向切换的封装方案 #

如果需要动态切换方向，可以封装一个函数，根据方向参数自动调整配置：

function renderSankey(direction) {
  const isRTL = direction === 'right-to-left';
  Highcharts.chart('container', {
    plotOptions: {
      sankey: {
        reversed: isRTL
      }
    },
    series: [{
      type: 'sankey',
      keys: isRTL ? ['to', 'from', 'weight'] : ['from', 'to', 'weight'],
      data: [
        ['A', 'B', 5],
        ['B', 'C', 3],
        ['A', 'D', 2]
      ]
    }]
  });
}

// 切换到左到右
renderSankey('left-to-right');
// 切换到右到左
renderSankey('right-to-left');

之前只修改keys导致渲染异常的原因：仅交换from和to会反转数据流，但图表节点布局还是默认的左到右，导致节点排列和流向不匹配，引发渲染错误。加上reversed: true后，节点布局方向与数据流方向一致，就能正常显示。

内容的提问来源于stack exchange，提问作者Vishnu Baliga