Chart.js 4 鼠标悬停扇区时其他扇区颜色切换异常问题求助

我明白你遇到的问题了——鼠标在扇区间移动时闪烁、颜色更新不及时，离开后还偶尔不重置，确实挺闹心的。我帮你分析下问题出在哪，再给你调整后的可运行代码：

问题根源 #

1. 事件监听不完整：你只处理了mousemove事件，没覆盖鼠标离开画布或者扇区间快速切换时的状态重置逻辑，导致偶尔颜色卡着不回来。
2. 样式修改方式不对：直接修改data.options.backgroundColor不是Chart.js推荐的动态改样式的方式，而且没有主动触发图表更新，导致颜色变化不及时。
3. 状态切换无统一重置：你是直接修改非悬停扇区的颜色，但没有在每次操作前先把所有颜色重置回默认，导致扇区状态混乱，出现闪烁。

修复后的代码 #

const colors = ["red", "green", "blue"];
const colorsRGBA = ["rgba(255,0,0,.25)", "rgba(0,255,0,.25)", "rgba(0,0,255,.25)"];

new Chart(document.getElementById("doughnut"), {
  type: "doughnut",
  data: {
    labels: ["A", "B", "C"],
    datasets: [
      {
        data: [1, 2, 3],
        backgroundColor: [...colors], // 初始化默认颜色
        hoverBackgroundColor: [...colors]
      }
    ]
  },
  options: {
    plugins: {
      tooltip: { enabled: false },
      legend: { display: false }
    },
    onHover(event, elements, chart) {
      // 第一步：先把所有扇区颜色重置为默认状态
      chart.data.datasets[0].backgroundColor = [...colors];
      
      // 第二步：如果有悬停的扇区，把其他扇区设为半透明
      if (elements.length > 0) {
        const hoverIndex = elements[0].index;
        chart.data.datasets[0].backgroundColor.forEach((_, index) => {
          if (index !== hoverIndex) {
            chart.data.datasets[0].backgroundColor[index] = colorsRGBA[index];
          }
        });
      }
      
      // 第三步：无动画更新图表，避免闪烁
      chart.update('none');
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<div style="height: 350px">
  <canvas id="doughnut"></canvas>
</div>

关键改进点 #

• 统一状态重置：每次触发onHover时先把所有颜色拉回默认，再根据当前悬停状态调整，彻底避免状态混乱。
• 正确修改样式：直接修改dataset.backgroundColor（Chart.js官方推荐的动态数据/样式修改方式），再调用chart.update('none')触发无动画更新，既保证颜色及时生效，又消除闪烁。
• 完整事件覆盖：onHover事件本身会监听鼠标移动、扇区间切换、离开画布等所有相关动作，不需要单独判断event.type，逻辑更简洁。

这样调整后，鼠标悬停时其他扇区会平滑变半透明，切换或离开时立刻恢复默认，不会再有闪烁和不重置的问题了～

备注：内容来源于stack exchange，提问作者Jonas P.