如何让Highcharts组合柱形图任意区域点击触发事件？

你的问题核心是堆叠柱形图中下层系列会被上层遮挡，仅绑定series.events.click只能触发顶部可见柱体的点击事件。要实现任意区域点击都响应，有两种可行方案：

方案一：监听整个图表点击事件（推荐） #

通过图表的全局点击事件，结合Highcharts的pointFromPixel方法定位点击位置对应的点，无论堆叠层上下都能识别：

plotOptions: {
    series: {
        animation: { duration: 50 },
        stacking: 'normal' // 根据你的图表堆叠模式调整，确保匹配实际配置
    }
},
chart: {
    events: {
        click: function(e) {
            // 将点击的像素坐标转换为对应数据点
            const point = this.pointFromPixel({
                x: e.chartX,
                y: e.chartY
            });
            
            if (point) { // 过滤空白区域的点击
                console.log(
                    'x: ' + point.category + ', ' +
                    'y: ' + point.y + ', ' +
                    'series.name: ' + point.series.name
                );
            }
        }
    }
}

方案二：强制所有层柱体接收点击事件 #

给每个系列的点设置pointerEvents: 'all'，让下层被遮挡的柱体也能响应点击：

plotOptions: {
    series: {
        animation: { duration: 50 },
        stacking: 'normal',
        point: {
            events: {
                click: function(e) {
                    console.log(
                        'x: ' + this.category + ', ' +
                        'y: ' + this.y + ', ' +
                        'series.name: ' + this.series.name
                    );
                }
            }
        },
        // 强制所有层柱体可接收鼠标事件
        pointerEvents: 'all',
        // 可选：取消非激活状态的透明度变化，避免视觉干扰
        states: {
            inactive: { opacity: 1 }
        }
    }
}

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