如何在Highcharts双树状图中实现相同数据节点的联动高亮

完全没问题，这个跨图表的悬停联动需求是可以通过Highcharts的事件API轻松实现的。核心思路就是监听第一个树状图的节点悬停/离开事件，然后在第二个树状图中找到对应节点并触发高亮状态。

具体实现步骤 #

• 给第一个树状图的节点绑定pointMouseOver事件，获取当前悬停节点的名称（比如"Bananas"）
• 在事件回调中定位到第二个树状图的实例，遍历其数据点找到名称匹配的节点
• 调用匹配节点的setState('hover')方法实现高亮；同时绑定pointMouseOut事件，在鼠标离开时调用setState('')取消高亮

完整代码示例 #

// 初始化第一个树状图容器
const chart1 = Highcharts.chart('container1', {
    chart: {
        type: 'treemap',
        width: 400
    },
    series: [{
        data: [
            { name: 'Apples', value: 10 },
            { name: 'Bananas', value: 20 },
            { name: 'Oranges', value: 15 },
            { name: 'Grapes', value: 12 }
        ],
        point: {
            events: {
                // 鼠标悬停时触发联动
                mouseOver: function() {
                    const targetName = this.name;
                    // 获取第二个图表实例（也可以直接用定义好的chart2变量）
                    const targetChart = Highcharts.charts.find(chart => chart.renderTo.id === 'container2');
                    
                    if (targetChart) {
                        // 找到第二个图表中对应名称的节点
                        const matchingPoint = targetChart.series[0].points.find(point => point.name === targetName);
                        if (matchingPoint) {
                            matchingPoint.setState('hover');
                        }
                    }
                },
                // 鼠标离开时取消高亮
                mouseOut: function() {
                    const targetName = this.name;
                    const targetChart = Highcharts.charts.find(chart => chart.renderTo.id === 'container2');
                    
                    if (targetChart) {
                        const matchingPoint = targetChart.series[0].points.find(point => point.name === targetName);
                        if (matchingPoint) {
                            matchingPoint.setState('');
                        }
                    }
                }
            }
        }
    }]
});

// 初始化第二个树状图容器
const chart2 = Highcharts.chart('container2', {
    chart: {
        type: 'treemap',
        width: 400
    },
    series: [{
        data: [
            { name: 'Apples', value: 18 },
            { name: 'Bananas', value: 25 },
            { name: 'Oranges', value: 12 },
            { name: 'Grapes', value: 16 }
        ]
    }]
});

额外说明 #

如果你的树状图有多层级结构（不是扁平数据），可以把匹配逻辑换成基于节点的唯一标识（比如自定义的id字段），这样能避免同名节点的匹配错误。另外，直接通过变量引用第二个图表实例（比如上面代码里的chart2）比从Highcharts.charts数组查找要更高效哦。

内容的提问来源于stack exchange，提问作者Asma Imtiaz