Highcharts桑基图：如何实现节点提示框固定并添加可点击链接？

核心问题分析 #

你遇到的问题主要来自两个点：

1. 配置层级错误：plotOptions被错误嵌套在series内部，导致sankey的tooltip配置未生效；
2. tooltip自动切换：鼠标从节点移到连接线时，默认会触发连接线的tooltip，直接覆盖节点的tooltip，即使设置stickOnContact也无法阻止切换。

解决步骤与代码示例 #

以下是修正后的完整代码，包含关键修改点：

Highcharts.chart('container', {
    title: {
        text: 'Highcharts Sankey Diagram'
    },
    accessibility: {
        point: {
            valueDescriptionFormat: '{index}. {point.from} to {point.to}, {point.weight}.'
        }
    },
    // 全局Tooltip配置，确保生效
    tooltip: {
        stickOnContact: true,
        distance: 0,
        hideDelay: 1000, // 延长隐藏延迟，预留点击时间
        useHTML: true, // 启用HTML支持，才能渲染可点击链接
        formatter: function() {
            // 判断当前hover的是节点还是连接线
            if (this.point.isNode) {
                // 自定义带链接的tooltip内容，示例链接用节点名称拼接
                return `<div>
                    <strong>节点：${this.point.name}</strong><br>
                    <a href="/path/to/${this.point.name}" target="_blank">点击访问详情页</a>
                </div>`;
            }
            // 连接线不显示Tooltip，避免切换
            return false;
        }
    },
    // 全局PlotOptions，放在顶级配置才会生效
    plotOptions: {
        sankey: {
            dataLabels: {
                style: {
                    textOutline: 'none',
                    color: '#393e49',
                },
                enabled: true,
            },
            nodeWidth: 4,
            tooltip: {
                stickOnContact: true
            }
        }
    },
    series: [{
        keys: ['from', 'to', 'weight'],
        data: [
            ['Portugal', 'Brazil', 2],
            ['Brazil', 'France', 1],
            ['France', 'Brazil', 1],
        ],
        type: 'sankey',
        name: 'Sankey demo series',
        // 可选：定义节点的额外属性，方便后续扩展
        nodes: [
            { id: 'Portugal', name: 'Portugal' },
            { id: 'Brazil', name: 'Brazil' },
            { id: 'France', name: 'France' }
        ]
    }]
});

关键修改说明 #

1. 修正配置层级：将plotOptions移到全局配置层级（与tooltip、title同级），确保sankey的配置被正确读取；
2. 启用HTML支持：设置useHTML: true，让Tooltip可以渲染<a>等HTML元素；
3. 自定义Tooltip内容：通过this.point.isNode判断交互对象类型，仅在hover节点时显示带链接的内容，连接线直接返回false不显示Tooltip，彻底避免切换问题；
4. 优化交互参数：延长hideDelay到1000ms，给用户足够的点击时间，stickOnContact: true确保鼠标停在Tooltip上时不会自动隐藏。

扩展方案（如需保留连接线Tooltip） #

如果需要保留连接线的Tooltip但不干扰节点Tooltip，可以通过监听图表事件手动控制Tooltip的显示：

chart: {
    events: {
        mouseOver: function(event) {
            if (event.point && event.point.isNode) {
                // 锁定Tooltip到节点
                this.tooltip.stickOnContact = true;
            } else {
                // 连接线hover时允许Tooltip切换
                this.tooltip.stickOnContact = false;
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者Matt Holmes