使用chartjs-plugin-autocolors为饼图自动配色失败，全为黑色求助

问题场景 #

使用React + react-chartjs-2 + chart.js 实现饼图，希望通过chartjs-plugin-autocolors自动生成扇区配色，已安装所有依赖，但饼图所有扇区均显示为黑色，插件未生成预期颜色。

错误原因 #

1. 未注册autocolors插件：仅导入插件但未通过Chart.register()完成注册，导致Chart.js无法识别该插件，默认使用黑色填充扇区。
2. 插件配置位置错误：将autocolors的配置放在options.plugins下，不符合该插件的配置规则。

修复步骤 #

1. 注册autocolors插件：导入插件后立即调用Chart.register(autocolors)，让Chart.js加载该插件。
2. 调整插件配置方式：将autocolors的配置作为插件实例，通过Pie组件的plugins属性传入，而非嵌套在options内。
3. 优化初始数据处理：避免空数据导致的Chart渲染异常，添加加载状态提示。

修复后的完整代码 #

import React, { useEffect, useState } from 'react';
import { Pie } from 'react-chartjs-2';
import autocolors from 'chartjs-plugin-autocolors';
import { Chart } from 'chart.js';

// 关键步骤：注册autocolors插件
Chart.register(autocolors);

const VendorPie = () => {
    const [data, setData] = useState([]);
    const [vendors, setVendors] = useState([]);

    useEffect(() => {
        fetch('http://localhost:1234/contracts/countVendorContract')
          .then((response) => response.json())
          .then((apiData) => {
            setData(apiData);
          })
          .catch((error) => {
            console.error('Hiba történt:', error);
          });

        fetch('http://localhost:1234/vendors/allVendors')
          .then((response) => response.json())
          .then((vendorData) => {
            setVendors(vendorData);
          })
          .catch((error) => {
            console.error('Hiba történt a vendor nevek lekérdezésekor:', error);
          });
      }, []);
    
    const chartData = {
        labels: data.map((item) => {
            const vendor = vendors.find((v) => v.id === item.contracted_vendor_id);
            return vendor ? vendor.name : item.contracted_vendor_id.toString();
          }),
        datasets: [{
          label: '',
          data: data.map((item) => item.darab),
          hoverOffset: 4
        }]
    };

    const chartOptions = {
        cutout: 70,
    };

    // 配置autocolors插件实例
    const chartPlugins = [
        autocolors({
            count: 6, // 指定配色数量
            // 可选：添加scheme参数切换配色方案，比如scheme: 'tableau.Tableau10'
        })
    ];

    // 空数据时显示加载提示
    if (data.length === 0) {
        return <div>加载中...</div>;
    }

    return (
        <Pie data={chartData} options={chartOptions} plugins={chartPlugins} id="pie-chart" />
    );
};

export default VendorPie;

额外说明 #

• 若需全局注册插件，可在项目入口文件（如index.js）中调用Chart.register(autocolors)，无需在每个组件重复操作。
• autocolors支持多种内置配色方案，可通过scheme参数指定，具体可参考插件官方文档的配色列表。

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