Highstock双轴图表提示框优化：合并提示框并实现光标跟随

嗨，刚好这两个需求在Highstock里都有成熟的配置方案，咱们直接上干货：

1. 合并三个提示框为一个 #

默认情况下多系列/多Y轴图表会出现多个独立的Tooltip，只需要开启shared: true就能把同X轴的所有系列数据整合到一个Tooltip里。如果需要自定义显示样式，还可以配合formatter函数来调整内容格式：

tooltip: {
    // 核心配置：开启共享Tooltip
    shared: true,
    // 自定义Tooltip内容（可选，按需调整）
    formatter: function() {
        // 先显示当前X轴刻度值
        let content = `<span style="font-size: 10px">${this.x}</span><br/>`;
        // 遍历所有系列的点，逐个添加信息
        this.points.forEach(point => {
            content += `<span style="color:${point.series.color}">\u25CF</span> ${point.series.name}: <b>${point.y}</b><br/>`;
        });
        return content;
    }
}

开启shared: true后，Highstock会自动把同一X坐标下的面积图和两个柱状图的点数据合并到一个Tooltip里，不用额外处理系列关联。

2. 让Tooltip跟随光标+支持页面滚动时正常显示 #

要实现Tooltip跟随光标移动，直接设置followPointer: true即可。如果你的图表所在页面需要滚动，默认的Tooltip定位可能会出现错位，这时候可以通过positioner函数自定义定位逻辑，让Tooltip相对于图表容器计算位置，不受页面滚动影响：

tooltip: {
    shared: true,
    // 让Tooltip跟随鼠标光标移动
    followPointer: true,
    // 自定义定位逻辑，适配页面滚动
    positioner: function(labelWidth, labelHeight, point) {
        const chartContainer = this.chart.container;
        // 获取图表容器相对于视口的位置
        const containerRect = chartContainer.getBoundingClientRect();
        // 计算Tooltip的最终位置：基于图表容器的位置，减去页面滚动偏移，确保滚动时位置正确
        return {
            x: point.plotX + containerRect.left - window.scrollX - labelWidth / 2,
            y: point.plotY + containerRect.top - window.scrollY - labelHeight - 10
        };
    }
}

这里的positioner函数会根据图表容器的实时位置和页面滚动量，动态计算Tooltip的坐标，确保不管页面怎么滚动，Tooltip都能精准出现在鼠标附近的图表区域内。

完整配置示例 #

把上面的配置整合到你的图表代码里，最终效果就是合并后的Tooltip跟着光标走，页面滚动也不会错位：

Highcharts.stockChart('container', {
    yAxis: [
        {
            title: { text: '面积图数据' },
            height: '60%',
            lineWidth: 2
        },
        {
            title: { text: '柱状图数据' },
            top: '65%',
            height: '35%',
            offset: 0,
            lineWidth: 2
        }
    ],
    series: [
        {
            type: 'area',
            name: '上方面积图',
            yAxis: 0,
            data: [1, 3, 2, 4, 5, 7, 6] // 替换成你的实际数据
        },
        {
            type: 'column',
            name: '下方柱状图1',
            yAxis: 1,
            data: [2, 4, 3, 5, 6, 8, 7] // 替换成你的实际数据
        },
        {
            type: 'column',
            name: '下方柱状图2',
            yAxis: 1,
            data: [3, 5, 4, 6, 7, 9, 8] // 替换成你的实际数据
        }
    ],
    tooltip: {
        shared: true,
        followPointer: true,
        positioner: function(labelWidth, labelHeight, point) {
            const chartContainer = this.chart.container;
            const containerRect = chartContainer.getBoundingClientRect();
            return {
                x: point.plotX + containerRect.left - window.scrollX - labelWidth / 2,
                y: point.plotY + containerRect.top - window.scrollY - labelHeight - 10
            };
        },
        formatter: function() {
            let content = `<span style="font-size: 10px">${this.x}</span><br/>`;
            this.points.forEach(point => {
                content += `<span style="color:${point.series.color}">\u25CF</span> ${point.series.name}: <b>${point.y}</b><br/>`;
            });
            return content;
        }
    }
});

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