Chart.js v3如何为环形图扇区添加悬停发光效果？

要在Chart.js v3里实现类似的悬停发光效果，不需要依赖旧版本专属插件，直接通过自定义插件结合Canvas的阴影属性就能搞定，具体实现如下：

完整代码示例 #

const myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    datasets: [
      {
        label: 'My First Dataset',
        data: chartData,
        borderWidth: 0,
        backgroundColor: [
          '#2BB3FF',
          '#59DDAA',
          '#FDC23C',
          '#FF622D',
          '#AB6CFE',
          '#C4C7CF',
          '#F67CF2',
        ],
      },
    ],
  },
  options: {
    hoverBorderWidth: 2.84,
    spacing: 20,
    hoverBorderColor: [
      '#2BB3FF',
      '#59DDAA',
      '#FDC23C',
      '#FF622D',
      '#AB6CFE',
      '#C4C7CF',
      '#F67CF2',
    ],
    elements: {
      arc: {
        angle: 360,
        borderWidth: 18,
      },
    },
    layout: {
      padding: {
        left: 15,
        right: 15,
        top: 10,
        bottom: 15,
      },
    },
    responsive: true,
    cutout: '90%',
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        enabled: false,
      },
      // 自定义发光参数配置
      glow: {
        shadowBlur: 15, // 发光强度，数值越大发光范围越广
      }
    },
  },
  plugins: [{
    id: 'sectorGlow',
    beforeDraw: (chart) => {
      const { ctx, plugins } = chart;
      const glowOptions = plugins.glow || { shadowBlur: 10 };
      
      // 获取当前悬停的扇区元素
      const hoveredArc = chart.getElementsAtEventForMode(chart.lastActive || {}, 'nearest', { intersect: true }, true)[0];
      
      if (hoveredArc) {
        const dataset = chart.data.datasets[hoveredArc.datasetIndex];
        const arcColor = dataset.backgroundColor[hoveredArc.index];
        
        // 保存当前Canvas状态，避免影响其他元素绘制
        ctx.save();
        // 设置发光阴影属性
        ctx.shadowColor = arcColor;
        ctx.shadowBlur = glowOptions.shadowBlur;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
        
        // 重新绘制带发光效果的悬停扇区
        chart.getDatasetMeta(hoveredArc.datasetIndex).data[hoveredArc.index].draw(ctx);
        // 恢复Canvas初始状态
        ctx.restore();
      }
    },
    // 监听鼠标事件，触发图表重绘更新发光状态
    afterEvent: (chart, event) => {
      if (event.type === 'mousemove') {
        chart.lastActive = event;
        chart.draw();
      } else if (event.type === 'mouseout') {
        chart.lastActive = null;
        chart.draw();
      }
    }
  }]
});

关键说明 #

• 核心逻辑：通过自定义插件的beforeDraw钩子，给悬停的扇区添加Canvas阴影属性模拟发光效果；afterEvent监听鼠标移动/离开事件，触发图表重绘来实时更新发光状态。
• 效果调整：可以修改plugins.glow.shadowBlur的值控制发光强度，数值越大发光范围越明显；阴影颜色直接复用扇区背景色，保证发光色调和扇区一致。
• 兼容性：完全基于Chart.js v3原生API实现，无额外依赖，适配v3及以上版本。

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