如何在ChartJS 3中实现悬停饼图扇区时切换鼠标指针样式

解决方案 #

Chart.js v3 中所有饼图扇区都是 Canvas 绘制的矢量图形，不存在独立的 DOM 节点，你不需要单独获取扇区元素，直接修改 Canvas 容器的光标样式即可实现需求。

正确配置如下：

options: {
  // 悬停样式切换
  onHover: (e, activeEls) => {
    e.native.target.style.cursor = activeEls.length ? 'pointer' : 'default';
  },
  // 配套点击跳转逻辑
  onClick: (e, activeEls) => {
    if (activeEls.length) {
      // activeEls[0].index 为当前点击扇区对应的数据集下标
      const currentDataIndex = activeEls[0].index;
      // 替换为你自己业务中对应下标的跳转地址
      const targetUrl = yourUrlList[currentDataIndex];
      window.location.href = targetUrl;
    }
  }
}

错误原因说明

你之前尝试修改 activeEls 下的 style 属性无效，是因为 activeEls 是 Chart.js 内部维护的绘制元素实例，不是原生 DOM 对象，无法直接操作样式。

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