ChartJS甜甜圈图表移除悬停光晕/阴影，保留悬停变色

要实现只保留悬停变色、去掉灰色光晕的需求，直接在数据集里配置对应的悬停阴影或半径属性即可，不用折腾复杂插件：

方案1：直接禁用悬停阴影 #

你看到的灰色光晕本质是悬停时的阴影效果，把阴影相关属性设为透明或0就能消除：

const chart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    // 你的数据配置...
    datasets: [{
      backgroundColor: '#正常显示颜色',
      hoverBackgroundColor: '#你设置的悬停变色', // 保留已配置的变色逻辑
      hoverShadowColor: 'transparent', // 将阴影设为透明
      hoverShadowBlur: 0,
      hoverShadowOffsetX: 0,
      hoverShadowOffsetY: 0
    }]
  },
  // 其他图表配置...
});

方案2：取消悬停时的半径放大 #

如果光晕是因为悬停时弧段半径变大产生的视觉效果，也可以直接关闭半径放大：

datasets: [{
  // 其他配置...
  hoverRadius: 0, // 悬停时不增大弧段半径
  hoverBackgroundColor: '#你设置的悬停变色'
}]

避坑提醒 #

• 别用events: {hover: null}，这会直接禁用所有悬停事件，连变色功能也会一起失效。
• 不用自定义插件，ChartJS原生就提供了这些配置项，直接在数据集里设置即可。

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