React-ChartJS-2环形图图例无法左置的问题求助

问题原因 #

你的配置无效核心原因是Chart.js v3+版本已将图例配置移至options.plugins.legend下，而非options根目录的legend字段，之前的写法是旧版本（v2）的语法，因此不生效。

修正后的完整代码 #

import { Doughnut } from 'react-chartjs-2';
import ChartDataLabels from 'chartjs-plugin-datalabels';

const getRandomColor = () => {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
};

const DoughnutChart = ({ data, label, city }) => {
    const sortedData = [...data].sort((a, b) => b.total - a.total);
    const limitedData = sortedData.slice(0, 5);
    const otherTotal = sortedData.slice(5).reduce((sum, item) => sum + item.total, 0);

    if (sortedData.length > 5) {
        limitedData.push({
            [label]: 'Other',
            total: otherTotal
        });
    }

    const chartData = {
        labels: limitedData.map(item => item[label]),
        datasets: [
            {
                label: '# of Devices',
                data: limitedData.map(item => item.total),
                backgroundColor: limitedData.map(() => getRandomColor()),
                borderColor: limitedData.map(() => getRandomColor()),
                borderWidth: 1,
            },
        ],
    };

    const total = chartData.datasets[0].data.reduce((a, b) => a + b, 0);

    const options = {
        // 关闭固定宽高比，让图表自适应容器（方便放大）
        maintainAspectRatio: false,
        layout: {
            // 给左侧图例留出足够空间
            padding: {
                left: 80
            }
        },
        plugins: {
            datalabels: {
                color: '#000000',
                display: true,
                formatter: (value, ctx) => {
                    let percentage = value / total * 100;
                    percentage = percentage.toFixed(2);
                    return `${value} (${percentage}%)`;
                }
            },
            // 正确的图例配置位置
            legend: {
                display: true,
                position: 'left',
                // 可选：调整图例垂直对齐方式
                align: 'center',
                labels: {
                    // 可选：调整图例文字样式
                    font: {
                        size: 12
                    }
                }
            }
        },
        // 调整环形图尺寸：radius控制整体大小，cutout控制空心比例
        cutout: '60%', // 中间空心占比，值越小环形越粗
        radius: '90%' // 环形图半径占容器的比例，值越大显示越大
    };

    // 给图表容器设置固定高度，配合maintainAspectRatio: false实现放大
    return (
        <div style={{ height: '400px', width: '100%' }}>
            <Doughnut data={chartData} options={options} plugins={[ChartDataLabels]} />
        </div>
    );
};

export default DoughnutChart;

关键修改点说明 #

1. 图例位置修正：
   将legend配置从options根目录移至options.plugins.legend下，这是Chart.js v3+的标准配置结构，设置position: 'left'即可让图例显示在左侧。

2. 环形图放大配置：

   • 设置maintainAspectRatio: false，关闭图表的固定宽高比，让图表可以根据容器尺寸自适应。
   • 给外层div设置固定高度（如400px），控制图表整体显示大小。
   • 通过radius: '90%'调整环形图的半径占容器的比例，数值越大环形显示越大；cutout: '60%'控制中间空心的比例，可根据需求调整。
   • 配置layout.padding.left给左侧图例留出足够空间，避免图表和图例重叠。

3. 可选优化：
   可通过legend.labels调整图例的字体大小、样式等，进一步优化显示效果。

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