如何在Highcharts中实现鼠标悬停时获取柱状图分类名称

我之前也踩过这个坑！其实Highcharts里有挺直接的方式能拿到悬停柱子对应的分类名称，给你分享两种常用方案：

方法1：通过Tooltip格式化函数获取 #

在配置Tooltip的时候，利用formatter函数可以直接访问到当前悬停点的category属性，这是最常用的场景：

Highcharts.chart('container', {
    // 其他基础配置项...
    tooltip: {
        formatter: function() {
            // this.point.category 就是当前悬停柱子对应的分类名称
            return `分类名称：${this.point.category}<br/>数值：${this.y}`;
        }
    },
    xAxis: {
        categories: ['分类A', '分类B', '分类C']
    },
    series: [{
        type: 'column',
        data: [10, 20, 30]
    }]
});

方法2：通过鼠标悬停事件直接获取 #

如果需要在自定义的鼠标悬停逻辑里拿到分类名称，可以在plotOptions的系列配置中监听mouseOver事件，同样通过this.category获取：

Highcharts.chart('container', {
    // 其他基础配置项...
    plotOptions: {
        column: {
            point: {
                events: {
                    mouseOver: function() {
                        const currentCategory = this.category;
                        console.log('当前悬停的分类：', currentCategory);
                        // 这里可以添加你的自定义业务逻辑，比如更新页面元素等
                    }
                }
            }
        }
    },
    xAxis: {
        categories: ['分类A', '分类B', '分类C']
    },
    series: [{
        type: 'column',
        data: [10, 20, 30]
    }]
});

小提示 #

你之前没找到可能是因为没注意到：每个柱状图的point对象本身就关联了对应的category属性，不管是在Tooltip还是鼠标事件里，只要能访问到当前的point实例，就能拿到这个值。如果是多系列的柱状图，这个方法同样适用，每个系列的point都会对应自己的分类名称。

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