Highcharts饼图扇区Tab无法聚焦及聚焦时Tooltip不显示问题咨询

核心实现思路 #

两个问题可以通过一套配置同时解决：一是通过渲染回调给扇区稳定添加可聚焦属性，二是监听聚焦事件主动触发tooltip的显示逻辑。 #

具体操作步骤 #

1. 先引入Highcharts官方无障碍模块，避免自定义逻辑和原生能力冲突
2. 通过render回调给所有饼图扇区自动添加tabindex="0"属性，保证图表重绘后属性不会丢失
3. 监听扇区的聚焦、失焦事件，调用Highcharts内部的鼠标hover相关方法触发tooltip显示/隐藏

完整配置代码示例 #

// NPM引入方式，CDN引入可直接引入带accessibility的完整Highcharts包
import Highcharts from 'highcharts'
import HighchartsAccessibility from 'highcharts/modules/accessibility'
// 注册无障碍模块
HighchartsAccessibility(Highcharts)

const pieChartConfig = {
  // 开启无障碍基础支持
  accessibility: {
    enabled: true
  },
  plotOptions: {
    pie: {
      // 原有扇区配置保留
      allowPointSelect: true,
      point: {
        events: {
          // 每次渲染扇区时自动加tabindex
          render: function() {
            if (this.graphic?.element) {
              this.graphic.element.setAttribute('tabindex', '0')
            }
          },
          // 聚焦时触发tooltip显示
          focus: function() {
            this.onMouseOver()
          },
          // 失焦时隐藏tooltip
          blur: function() {
            this.onMouseOut()
          },
          // 可选：支持回车/空格选中扇区
          keydown: function(e) {
            if (e.key === 'Enter' || e.key === ' ') {
              e.preventDefault()
              this.select(!this.selected)
            }
          }
        }
      }
    }
  },
  // 其他你的原有图表配置：series、tooltip、title等保持不变
}

常见问题说明 #

• 之前手动在DevTools加tabindex无效的原因：Highcharts在重绘（数据更新、容器尺寸变化等场景）时会重新生成SVG元素，手动添加的属性会被覆盖，通过render回调绑定的逻辑每次渲染都会执行，不会失效。
• 无需自定义tooltip触发逻辑：直接调用Highcharts内置的onMouseOver/onMouseOut方法，和鼠标hover的表现完全一致，不会出现样式、位置不一致的问题。

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