如何在Chart.js（react-chartjs-2）中实现悬浮时放大环形图扇区

我刚好做过类似的需求，这个效果可以通过Chart.js的自定义插件来实现，核心思路是监听鼠标悬浮事件，动态修改对应扇区的偏移量，让它突出显示。下面是具体的实现步骤和代码示例：

1. 核心实现思路 #

我们需要编写一个Chart.js插件，监听hover事件：当鼠标悬停在某个扇区上时，给这个扇区设置一个正向的offset值（让它向外突出），同时把其他扇区的offset重置为0；当鼠标离开时，把所有扇区的offset都重置为0，恢复初始状态。

2. 完整代码示例 #

import React from 'react';
import { Doughnut } from 'react-chartjs-2';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';

// 注册Chart.js需要的基础组件
ChartJS.register(ArcElement, Tooltip, Legend);

// 自定义悬浮放大插件
const doughnutHoverPlugin = {
  id: 'doughnutHover',
  beforeRender(chart) {
    const { hovered } = chart;
    if (!hovered.length) return;

    // 获取当前悬浮的扇区索引
    const hoverIndex = hovered[0].index;
    // 遍历所有扇区，设置对应偏移量
    chart.data.datasets.forEach((dataset) => {
      dataset.data.forEach((_, index) => {
        dataset.offset = dataset.offset || [];
        dataset.offset[index] = index === hoverIndex ? 8 : 0; // 8是突出距离，可按需调整
      });
    });
  },
  // 鼠标离开时重置所有偏移
  beforeEvent(chart, event) {
    if (event.type === 'mouseout') {
      chart.data.datasets.forEach((dataset) => {
        if (dataset.offset) {
          dataset.offset.fill(0);
        }
      });
    }
  }
};

const DoughnutChart = () => {
  const data = {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [
      {
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)',
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)',
        ],
        borderWidth: 1,
        offset: [] // 初始化偏移数组
      },
    ],
  };

  const options = {
    plugins: {
      legend: {
        position: 'top',
      },
      tooltip: {
        callbacks: {
          label: function(context) {
            return `${context.label}: ${context.parsed}`;
          }
        }
      }
    },
    interaction: {
      mode: 'index',
      intersect: false,
    },
  };

  return (
    <div style={{ width: '400px', height: '400px' }}>
      <Doughnut data={data} options={options} plugins={[doughnutHoverPlugin]} />
    </div>
  );
};

export default DoughnutChart;

3. 关键代码解释 #

• 自定义插件doughnutHoverPlugin：
  • beforeRender钩子：在图表渲染前检查是否有悬浮的扇区，给对应扇区设置offset值，其他扇区重置为0，确保渲染时突出效果生效。
  • beforeEvent钩子：监听mouseout事件，当鼠标离开图表区域时，把所有扇区的偏移量重置为0，避免残留突出状态。
• offset数值调整：代码里的8是扇区向外突出的距离，你可以根据视觉需求增大或减小这个数值，达到理想的放大效果。
• 插件注册：在Doughnut组件的plugins属性中传入自定义插件，确保插件能参与图表的事件监听和渲染流程。

效果说明 #

当你把鼠标悬停在某个扇区上时，该扇区会向外突出显示；鼠标离开后，所有扇区都会恢复到初始位置，完全符合你预期的悬浮放大效果。

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