Highcharts饼图图例按钮点击失效问题求助

问题现象 #

• 页面横向排列3个饼图，第一个饼图的图例按钮全部失效，第二个仅前两个图例按钮可用，第三个所有图例按钮正常工作
• 移除饼图相关CSS样式后，图例按钮恢复可点击状态

代码问题定位 #

问题出在自定义饼图中心文本的实现逻辑中：

this.renderer.text(text, null, null, true)
    .css({
        transform: 'translate(-50%)',
        fontSize: '32px',
        color: 'black'
    })
    .add();

原因分析 #

自定义添加的customTitle文本元素默认未设置定位属性，加上transform: translate(-50%)后，元素的实际占据区域会向左侧偏移并扩展，刚好覆盖在左侧的图例区域上方，拦截了图例的点击事件。由于三个饼图横向排列的位置不同，文本元素覆盖的图例范围不一致，导致出现部分/全部图例失效的差异现象。

解决方案 #

方案1：让点击事件穿透文本元素 #

给自定义文本添加pointer-events: none样式，允许点击事件穿透到下方的图例：

this.customTitle = this.renderer.text(
    text,
    null,
    null,
    true
)
.css({
    transform: 'translate(-50%)',
    fontSize: '32px',
    color: 'black',
    pointerEvents: 'none'
})
.add();

方案2：优化文本定位逻辑（更推荐） #

使用text-anchor: 'middle'实现文本居中，替代transform: translate(-50%)，避免文本元素区域偏移到图例上：

// 修改render事件内的代码
var series = this.series[0],
    seriesCenter = series.center,
    x = seriesCenter[0] + this.plotLeft,
    y = seriesCenter[1] + this.plotTop,
    text = 'Total: ' + series.total,
    fontMetrics = this.renderer.fontMetrics(16);

if (!this.customTitle) {
    this.customTitle = this.renderer.text(
        text,
        x,
        y + fontMetrics.f / 2,
        true
    )
    .css({
        fontSize: '32px',
        color: 'black'
    })
    .attr({
        'text-anchor': 'middle'
    })
    .add();
}
// 无需再修改x、y属性，初始化时已经设置正确

验证效果 #

修改后，自定义中心文本会严格居中显示在饼图内部，不会覆盖图例区域，图例按钮的点击事件即可正常触发。

内容的提问来源于stack exchange，提问作者SUDHANSHU SHEKHAR SRIVASTAVA