如何实现Highcharts桑基图中无链接（权重为0）节点的显示？

要解决无入链/出链节点的显示问题，不需要伪造权重链接，直接通过自定义节点生成逻辑即可实现，以下是两种简便方法：

方法一：重写Sankey的generateNodes方法 #

Highcharts默认的generateNodes方法会过滤掉没有关联链接的节点，我们可以重写该方法，强制保留所有在nodes配置中定义的节点：

// 重写桑基图的节点生成方法
Highcharts.seriesTypes.sankey.prototype.generateNodes = function () {
    // 先调用原方法处理有链接的节点
    const originalMethod = Highcharts.seriesTypes.sankey.prototype.generateNodes;
    originalMethod.call(this);

    const series = this;
    const configNodes = series.options.nodes || [];
    const existingNodeIds = series.nodes.map(node => node.id);

    // 补充配置中存在但未被原方法加入的无链接节点
    configNodes.forEach(node => {
        if (!existingNodeIds.includes(node.id)) {
            series.nodes.push({
                id: node.id,
                name: node.name || node.id,
                color: node.color,
                linksIn: [],
                linksOut: []
            });
        }
    });

    // 重新触发布局渲染
    series.chart.redraw(false);
};

使用时，只需在初始化图表前定义这段代码，然后正常配置nodes数组即可——所有配置的节点，无论是否有对应链接，都会被渲染出来。

方法二：图表加载后手动补充节点 #

如果不想重写原型方法，也可以在图表加载完成后，手动将无链接节点添加到系列的节点列表中：

Highcharts.chart('container', {
    series: [{
        type: 'sankey',
        nodes: [
            { id: 'node1', name: '无链接节点1' },
            { id: 'node2', name: '有链接节点', color: '#ff0000' },
            // 其他节点...
        ],
        data: [
            ['node2', 'node3', 10]
            // 其他链接...
        ]
    }],
    chart: {
        events: {
            load: function () {
                const series = this.series[0];
                const configNodes = series.options.nodes || [];
                const existingIds = series.nodes.map(n => n.id);

                // 补充无链接节点
                configNodes.forEach(node => {
                    if (!existingIds.includes(node.id)) {
                        series.nodes.push({
                            id: node.id,
                            name: node.name || node.id,
                            color: node.color,
                            linksIn: [],
                            linksOut: []
                        });
                    }
                });

                this.redraw();
            }
        }
    }
});

这两种方法都无需处理伪造链接的透明度、提示框修改等额外操作，直接基于配置节点实现需求，逻辑更清晰简洁。

内容的提问来源于stack exchange，提问作者Augustin Riedinger