如何使用Highcharts气泡图展示3列以上数据（含名称列）？

嗨，我来帮你搞定这个问题！Highcharts的气泡图默认只识别每个数据点的前三个值（对应x轴、y轴、气泡大小z），第四列的名称不会自动展示，但我们可以通过自定义提示框（Tooltip）或者添加数据标签两种方式把它显示出来，下面给你具体的实现方案：

方法一：转换数据结构，结合Tooltip和数据标签展示名称 #

我们可以把原始的二维数组转换成带name属性的点对象数组，让Highcharts直接识别名称字段，然后通过提示框和数据标签展示：

$(function () {
    // 你的原始数据
    const rawData = [ 
        [5,11,20,"peter"], 
        [4,12,20,"tom"], 
        [6,13,20,"kate"], 
        [7,14,15,"king"], 
        [8,16,16,"jin"] 
    ];
    
    // 转换数据结构，把第四列赋值给点的name属性
    const processedData = rawData.map(item => ({
        x: item[0],
        y: item[1],
        z: item[2],
        name: item[3]
    }));

    $('#container').highcharts({
        chart: {
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy'
        },
        title: {
            text: 't1'
        },
        xAxis: {
            gridLineWidth: 1
        },
        yAxis: {
            startOnTick: false,
            endOnTick: false
        },
        // 自定义提示框，展示名称和所有数据
        tooltip: {
            formatter: function() {
                return `<b>${this.point.name}</b><br/>
                        X值: ${this.point.x}<br/>
                        Y值: ${this.point.y}<br/>
                        气泡大小: ${this.point.z}`;
            }
        },
        // 启用数据标签，直接在气泡上显示名称
        plotOptions: {
            bubble: {
                dataLabels: {
                    enabled: true,
                    formatter: function() {
                        return this.point.name;
                    },
                    style: {
                        color: '#2c3e50',
                        fontWeight: 'bold',
                        fontSize: '12px'
                    }
                }
            }
        },
        series: [{
            name: '人员数据',
            data: processedData
        }]
    });
});

方法二：不转换数据，直接读取第四列值 #

如果你不想修改原始数据结构，也可以在Tooltip的格式化函数里直接读取原始数组的第四个元素：

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy'
        },
        title: {
            text: 't1'
        },
        xAxis: {
            gridLineWidth: 1
        },
        yAxis: {
            startOnTick: false,
            endOnTick: false
        },
        tooltip: {
            formatter: function() {
                // 直接读取原始数据的第四个元素（索引为3）
                const userName = this.point.options[3];
                return `<b>${userName}</b><br/>
                        X值: ${this.point.x}<br/>
                        Y值: ${this.point.y}<br/>
                        气泡大小: ${this.point.z}`;
            }
        },
        series: [{
            name: '人员数据',
            data: [ 
                [5,11,20,"peter"], 
                [4,12,20,"tom"], 
                [6,13,20,"kate"], 
                [7,14,15,"king"], 
                [8,16,16,"jin"] 
            ]
        }]
    });
});

这样设置后，当你鼠标 hover 到气泡上时，就能看到第四列的名称了；如果需要在气泡上直接显示名称，加上方法一里的plotOptions.bubble.dataLabels配置即可。

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