Highcharts散点图中循环系列数据填充Tooltip的实现问题

完全明白你的需求！其实不用纠结复杂的循环逻辑，Highcharts的Tooltip自带的formatter函数就能完美搞定这个场景，而且能直接访问你存在数据点里的所有自定义信息。我给你一步步拆解：

第一步：给数据点添加自定义字段 #

首先你需要确保系列的每个数据点都包含公司名称、CEO姓名和薪酬比率这些信息，不用单独存到别的对象里，直接把这些字段加到数据点对象里就行，比如：

series: [{
    name: 'CEO薪酬数据',
    data: [
        { x: 100, y: 200, company: 'A公司', ceoName: '张三', payRatio: 150 },
        { x: 150, y: 250, company: 'B公司', ceoName: '李四', payRatio: 180 },
        // 更多数据点...
    ]
}]

第二步：配置Tooltip的formatter函数 #

接下来在tooltip配置里，用formatter来自定义显示内容，这个函数里的this.point就是当前鼠标悬停的那个数据点，直接访问你刚才加的字段就行：

tooltip: {
    formatter: function() {
        // 这里可以自由拼接你要的内容，格式完全自定义
        return `<strong>公司名称：</strong>${this.point.company}<br/>
                <strong>CEO姓名：</strong>${this.point.ceoName}<br/>
                <strong>薪酬比率：</strong>${this.point.payRatio}`;
    }
}

完整的示例代码 #

把这些整合到你的现有代码里，大概是这样：

Highcharts.chart('container', {
    chart: {
        type: 'scatter',
        zoomType: 'xy'
    },
    title: {
        text: 'CEO薪酬与公司规模散点图'
    },
    xAxis: {
        title: {
            text: '公司规模'
        }
    },
    yAxis: {
        title: {
            text: 'CEO薪酬'
        }
    },
    tooltip: {
        formatter: function() {
            return `<strong>公司：</strong>${this.point.company}<br/>
                    <strong>CEO：</strong>${this.point.ceoName}<br/>
                    <strong>薪酬比率：</strong>${this.point.payRatio}`;
        }
    },
    series: [{
        name: '薪酬数据',
        data: [
            { x: 80, y: 160, company: 'Alpha科技', ceoName: '王大锤', payRatio: 120 },
            { x: 120, y: 220, company: 'Beta制造', ceoName: '李小花', payRatio: 160 },
            { x: 150, y: 280, company: 'Gamma零售', ceoName: '赵小刚', payRatio: 200 }
        ]
    }]
});

额外说明 #

如果你真的需要循环整个系列的数据（比如要对比当前点和其他点的信息），也可以在formatter里通过this.series.data拿到整个系列的数据集，然后用forEach或者for循环遍历，但一般来说，只显示当前悬停点的信息的话，直接用this.point就足够高效了。

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