求助：如何调整Highcharts桑基图连接线长度及数据列间距

嗨，我来帮你搞定这个桑基图连接线长度（列间距）的调整问题！从你的截图能看到，当前列之间的间距确实比较宽，要把它缩小到原来的一半，其实只需要修改一个配置项就行。

核心解决方案 #

在Highcharts桑基图的配置里，通过调整series.sankey.columnPadding参数来控制列之间的水平间距。默认值是50（像素），把它改成25就能得到你想要的一半宽度效果。

修改后的示例代码 #

基于官方演示的代码，我给你加上了这个关键配置：

Highcharts.chart('container', {
    title: {
        text: 'Highcharts Sankey Diagram'
    },
    accessibility: {
        point: {
            valueDescriptionFormat: '{index}. {point.from} to {point.to}, {point.weight}.'
        }
    },
    series: [{
        keys: ['from', 'to', 'weight'],
        data: [
            ['Brazil', 'Portugal', 5],
            ['Brazil', 'France', 1],
            ['Brazil', 'Spain', 1],
            ['Brazil', 'England', 1],
            ['Canada', 'Portugal', 1],
            ['Canada', 'France', 5],
            ['Canada', 'England', 1],
            ['Mexico', 'Portugal', 1],
            ['Mexico', 'France', 1],
            ['Mexico', 'Spain', 5],
            ['Mexico', 'England', 1],
            ['USA', 'Portugal', 1],
            ['USA', 'France', 1],
            ['USA', 'Spain', 1],
            ['USA', 'England', 5],
            ['Portugal', 'Angola', 2],
            ['Portugal', 'Senegal', 1],
            ['Portugal', 'Morocco', 1],
            ['Portugal', 'South Africa', 3],
            ['France', 'Angola', 1],
            ['France', 'Senegal', 3],
            ['France', 'Mali', 3],
            ['France', 'Morocco', 3],
            ['France', 'South Africa', 1],
            ['Spain', 'Senegal', 1],
            ['Spain', 'Morocco', 3],
            ['Spain', 'South Africa', 1],
            ['England', 'Angola', 1],
            ['England', 'Senegal', 1],
            ['England', 'Morocco', 2],
            ['England', 'South Africa', 7],
            ['South Africa', 'China', 5],
            ['South Africa', 'India', 1],
            ['South Africa', 'Japan', 3],
            ['Angola', 'China', 5],
            ['Angola', 'India', 1],
            ['Angola', 'Japan', 3],
            ['Senegal', 'China', 5],
            ['Senegal', 'India', 1],
            ['Senegal', 'Japan', 3],
            ['Mali', 'China', 5],
            ['Mali', 'India', 1],
            ['Mali', 'Japan', 3],
            ['Morocco', 'China', 5],
            ['Morocco', 'India', 1],
            ['Morocco', 'Japan', 3]
        ],
        type: 'sankey',
        name: 'Sankey demo series',
        // 关键配置：将列间距缩小到原来的一半
        sankey: {
            columnPadding: 25
        }
    }]
});

额外说明 #

• 如果需要更精准的自定义布局，还可以给每个节点单独设置x坐标（通过series.nodes数组定义节点时指定），但对于你的需求来说，调整columnPadding是最直接高效的方式。
• 你可以根据实际显示效果微调columnPadding的数值，直到达到你满意的间距。

内容的提问来源于stack exchange，提问作者Qing Xu