能否设置Highcharts.js 悬停单数据点时显示同系列全部tooltip？

当然可以实现这个需求，核心是通过自定义Tooltip的格式化函数，获取当前悬停点所属系列的所有数据，然后渲染成包含全系列数据的Tooltip内容。以下是完整的可运行示例：

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '悬停系列显示全系列数据Tooltip示例'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月']
    },
    yAxis: {
        title: {
            text: '数值'
        }
    },
    tooltip: {
        useHTML: true, // 允许使用HTML自定义样式
        shared: false, // 关闭多系列共享Tooltip（仅展示当前系列的所有点）
        formatter: function() {
            // 获取当前悬停点所属的系列
            const series = this.series;
            let tooltipContent = `<div style="font-weight:bold;">${series.name}</div><table>`;
            
            // 遍历系列的所有数据点，生成每行内容
            series.data.forEach(point => {
                tooltipContent += `
                    <tr>
                        <td style="color:${series.color};padding:0 5px;">${point.category}:</td>
                        <td style="padding:0 5px;text-align:right;">${point.y}</td>
                    </tr>
                `;
            });
            
            tooltipContent += '</table>';
            return tooltipContent;
        }
    },
    series: [{
        name: '绿色系列',
        data: [10, 20, 30, 40, 50],
        color: '#7ed321'
    }, {
        name: '红色系列',
        data: [5, 15, 25, 35, 45],
        color: '#f5a623'
    }]
});

关键配置说明 #

• tooltip.useHTML: true：开启HTML支持，方便用表格布局展示全系列数据，让Tooltip结构更清晰美观。
• tooltip.shared: false：关闭默认的多系列共享Tooltip功能，确保只处理当前悬停的单个系列数据。
• tooltip.formatter：核心处理函数，通过this.series获取当前悬停点所属系列，遍历series.data拿到所有数据点，拼接成包含系列名称和全量数据的HTML内容。

配置完成后，悬停目标系列的任意数据点，Tooltip都会完整展示该系列的所有数据，完全匹配你的需求。

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