如何自定义Highcharts气泡图的悬停提示内容，替换默认轴数据？

完全可以替换气泡悬停时默认显示的x、y轴数据，核心是通过Highcharts的tooltip.formatter函数自定义提示框内容，以下是具体实现方案：

1. 准备带自定义数据的系列数据 #

在气泡图的每个数据点中，额外添加存储销售代表信息的字段（比如salesReps），示例如下：

series: [{
    data: [
        {x: 95, y: 95, z: 13.8, salesReps: ["Carine", "John", "Alice"]},
        {x: 86.5, y: 102.9, z: 14.7, salesReps: ["Bob", "Charlie"]}
    ]
}]

2. 自定义提示框内容 #

根据需求选择单行或列表显示方式：

单行显示销售代表 #

配置tooltip.formatter直接拼接销售代表名称，替换默认的x、y数据：

tooltip: {
    formatter: function() {
        return `<b>销售代表:</b> ${this.point.salesReps.join(', ')}`;
    }
}

对应效果：

列表显示销售代表 #

如果需要以列表形式展示，需开启useHTML: true，然后用HTML列表标签渲染数据：

tooltip: {
    useHTML: true,
    formatter: function() {
        const repList = this.point.salesReps.map(rep => `<li>${rep}</li>`).join('');
        return `<b>销售代表列表:</b><ul>${repList}</ul>`;
    }
}

对应效果：

效果对比 #

默认提示框（显示x、y轴数据）：

内容的提问来源于stack exchange，提问作者Carine D'Mello