Chart.js饼图悬停自定义CSS问题：光标触发范围及性能优化问询

针对你遇到的两个问题，我整理了基于Chart.js原生能力的具体实现方案：

1. 仅在悬停饼图切片时显示pointer光标 #

要避免光标在空白区域误触发，核心是仅当鼠标真正落在饼图数据切片上时，才修改光标样式。可以通过Chart.js的插件机制结合元素检测方法实现：

const chart = new Chart(ctx, {
  type: 'pie',
  data: yourData,
  options: {
    // 保留你的其他配置项
  },
  plugins: [{
    afterInit: function(chart) {
      // 给canvas绑定鼠标移动事件
      chart.canvas.addEventListener('mousemove', function(e) {
        // 精准获取鼠标下的切片元素（intersect: true确保仅检测元素内部）
        const targetElements = chart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
        // 根据是否存在目标元素，动态切换光标
        chart.canvas.style.cursor = targetElements.length > 0 ? 'pointer' : 'default';
      });
      // 鼠标离开canvas时强制重置光标
      chart.canvas.addEventListener('mouseleave', function() {
        chart.canvas.style.cursor = 'default';
      });
    }
  }]
});

这里的intersect: true是关键参数，它会过滤掉鼠标落在空白区域的情况，只有当光标真正覆盖切片时才会返回对应元素。

2. 用mouseenter/mouseleave替代hover的持续执行 #

Chart.js的每个数据元素（比如饼图切片）都支持原生的mouseenter和mouseleave事件，这两个事件只会在鼠标进入/离开元素的瞬间触发一次，完全避免了hover持续执行的性能问题：

const chart = new Chart(ctx, {
  type: 'pie',
  data: yourData,
  options: {
    events: ['mousemove', 'mouseenter', 'mouseleave'], // 确保开启对应事件支持
    // 保留你的其他配置项
  },
  plugins: [{
    afterInit: function(chart) {
      // 遍历所有切片元素，绑定事件
      chart.data.datasets.forEach((dataset, datasetIndex) => {
        dataset.data.forEach((_, sliceIndex) => {
          const sliceElement = chart.getDatasetMeta(datasetIndex).data[sliceIndex];
          
          sliceElement.addEventListener('mouseenter', function() {
            // 这里写你原本在hover中的逻辑，仅触发一次
            console.log('进入切片：', sliceIndex);
            chart.canvas.style.cursor = 'pointer'; // 也可以在这里控制光标
          });
          
          sliceElement.addEventListener('mouseleave', function() {
            // 鼠标离开时的清理逻辑
            console.log('离开切片：', sliceIndex);
            chart.canvas.style.cursor = 'default';
          });
        });
      });
    }
  }]
});

这种方式下，事件触发逻辑更轻量化，不会因为鼠标在元素内移动而重复执行代码。

补充提示 #

• 两种光标控制方案二选一即可，避免逻辑冲突；
• 如果你使用Chart.js v2版本，部分API名称略有差异（比如用getElementsAtEvent替代getElementsAtEventForMode），需要根据版本调整。

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