Highcharts堆叠柱状图禁用柱体选中且保留hover提示功能实现问询

实现方案 #

无需设置enableMouseTracking: false，仅需要禁用柱体选中逻辑、拦截点击事件即可，完全保留hover触发tooltip的能力，修改方式如下：

在原配置的plotOptions.column节点下新增选中状态禁用配置，同时保留原有的点击事件拦截即可，修改后的代码片段参考：

plotOptions: {
    column: {
        stacking: 'normal',
        dataLabels: {
            enabled: true
        },
        // 新增配置开始
        allowPointSelect: false, // 禁用柱体的点击选中底层逻辑
        states: {
            select: {
                enabled: false // 关闭选中状态的所有样式效果
            },
            hover: {
                enabled: true // 保留hover状态，确保tooltip正常触发
            }
        },
        // 新增配置结束
        events: {
            click: function (event) {
                return false // 原有点击拦截逻辑保留，阻止所有点击后续行为
            },
        }
    },
    series: {
        // 若需全局生效，也可以将上述allowPointSelect、states配置移到此处
        dataLabels: {
            enabled: false,
            formatter: function () {}
        },
        events: {
            legendItemClick: function () {
                var name = this.name.split(' ')[0] + ' ' + this.name.split(' ')[1];
                var _i = this._i;
                Highcharts.each(this.chart.series, function (p, i) {
                    if (name === (p.name.split(' ')[0] + ' ' + p.name.split(' ')[1]) && _i !== p._i) {
                        (!p.visible) ? p.show() : p.hide()
                    }
                })
            }
        },
    },
}

原理解释 #

• allowPointSelect: false直接关闭了Highcharts内置的点击选中柱体的逻辑，从根源上避免选中行为触发
• 显式禁用states.select.enabled，彻底消除点击后可能出现的高亮、样式变化等选中效果
• 保留states.hover.enabled为开启状态，鼠标悬停时tooltip可以正常触发
• 原有click事件返回false拦截所有点击冒泡和默认逻辑，双重保险避免点击触发其他额外行为

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