多系列多Highcharts图表Tooltip同步：显示与关闭问题咨询

我帮你搞定这两个同步 Tooltip 的问题，直接看具体解决方案：

问题1：确保 Tooltip 仅显示实际存在的系列 #

你的代码里直接把所有系列的searchPoint结果都塞进了points数组，但有些系列在当前鼠标位置可能没有对应的数据点（会返回null），这就导致Tooltip里出现空的系列项。我们只需要过滤掉这些无效的null点就行：

修改后的核心代码片段：

$('#container').bind('mousemove touchmove touchstart', function (e) {
    var chart, point, i, event;
    for (i = 0; i < Highcharts.charts.length; i = i + 1) {
        chart = Highcharts.charts[i];
        var points = [];
        event = chart.pointer.normalize(e.originalEvent);
        // 遍历系列，只保留有效数据点
        for(var j=0; j<chart.series.length; j++) {
            point = chart.series[j].searchPoint(event, true);
            // 仅将存在的point加入数组
            if (point) {
                points.push(point);
            }
        }
        // 只有当有有效点时才刷新Tooltip，否则直接隐藏
        if (points.length > 0) {
            chart.tooltip.refresh(points);
        } else {
            chart.tooltip.hide();
        }
    }
});

这样处理后，Tooltip只会展示当前鼠标位置有数据的系列，不会再出现空项。

问题2：移出图表时关闭Tooltip #

我们需要给图表容器添加mouseleave事件监听，当鼠标移出容器范围时，遍历所有Highcharts图表并主动关闭Tooltip：

添加这段代码：

$('#container').bind('mouseleave', function() {
    Highcharts.charts.forEach(function(chart) {
        if (chart) {
            chart.tooltip.hide();
        }
    });
});

这段代码会在鼠标离开容器时，把所有图表的Tooltip都关闭，避免Tooltip停留在页面上无法消失。

优化思路总结 #

• 过滤searchPoint返回的null值，只保留有效数据点再传给Tooltip
• 监听鼠标离开事件，主动触发所有图表的Tooltip隐藏
• 额外优化：当没有有效点时也主动隐藏Tooltip，避免出现空Tooltip

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