React-ChartJS-2饼图实现点击图例高亮对应扇区的方法

针对你的需求，这里提供两种常见的高亮实现方式，均基于你现有代码修改，直接替换即可使用：

方案1：点击图例偏移对应扇区 #

通过修改饼图扇区的offset属性，让选中的扇区向外偏移，其他扇区恢复默认位置。需要将数据转为React状态，方便动态更新：

import { useState } from 'react';
import { Pie as PieChart } from 'react-chartjs-2';
import { ChartOption } from 'chart.js';

export default function MyPieChart() {
    // 初始化偏移数组，默认全部为0（或你需要的默认偏移）
    const [offsets, setOffsets] = useState([0, 0, 0, 0, 0, 0]);
    // 记录当前高亮的索引，初始为null表示无高亮
    const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);

    const chartOptions: ChartOption<'pie'> = {
        plugins: {
            datalabels: {
                display: false,
            },
            legend: {
                position: 'top',
                onClick: function (e, legendItem) {
                    const index = legendItem.index as number;
                    const newOffsets = [...offsets];
                    
                    // 如果点击的是已高亮的索引，取消高亮；否则设置该索引偏移
                    if (highlightedIndex === index) {
                        newOffsets.fill(0);
                        setHighlightedIndex(null);
                    } else {
                        newOffsets.fill(0);
                        newOffsets[index] = 50; // 偏移量可自行调整
                        setHighlightedIndex(index);
                    }
                    
                    setOffsets(newOffsets);
                    this.chart.update();
                },
            },
        },
    };

    const data = {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [
            {
                data: [15, 1, 1, 1, 45, 1],
                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)',
                ],
                offset: offsets, // 使用状态中的偏移数组
            },
        ],
    };

    return <PieChart title={'My Chart'} data={data} options={chartOptions} />;
}

逻辑说明： #

• 用offsets状态数组控制每个扇区的偏移量，初始全部为0
• 点击图例时判断当前是否已高亮该扇区，是则取消，否则设置该扇区偏移50（可自行调整数值）
• 通过highlightedIndex记录当前高亮状态，避免重复操作

方案2：点击图例将其他扇区设为灰色 #

保持选中扇区的原有颜色，将其他扇区转为灰色，突出选中项：

import { useState } from 'react';
import { Pie as PieChart } from 'react-chartjs-2';
import { ChartOption } from 'chart.js';

export default function MyPieChart() {
    // 保存原始颜色数组
    const originalColors = [
        '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)',
    ];
    const [colors, setColors] = useState([...originalColors]);
    const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);

    const chartOptions: ChartOption<'pie'> = {
        plugins: {
            datalabels: {
                display: false,
            },
            legend: {
                position: 'top',
                onClick: function (e, legendItem) {
                    const index = legendItem.index as number;
                    const newColors = [...originalColors];
                    
                    if (highlightedIndex === index) {
                        // 取消高亮，恢复所有颜色
                        setColors([...originalColors]);
                        setHighlightedIndex(null);
                    } else {
                        // 将非选中扇区设为灰色
                        newColors.forEach((color, i) => {
                            if (i !== index) {
                                newColors[i] = 'rgba(128, 128, 128, 0.2)';
                            }
                        });
                        setColors(newColors);
                        setHighlightedIndex(index);
                    }
                    
                    this.chart.update();
                },
            },
        },
    };

    const data = {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [
            {
                data: [15, 1, 1, 1, 45, 1],
                backgroundColor: colors, // 使用状态中的颜色数组
                offset: 0, // 可根据需求保留或调整偏移
            },
        ],
    };

    return <PieChart title={'My Chart'} data={data} options={chartOptions} />;
}

逻辑说明： #

• 保存原始颜色数组，避免每次修改丢失原始值
• 点击图例时，将非选中项的颜色替换为灰色，选中项保持原色
• 再次点击同一图例时，恢复所有扇区的原始颜色

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