Chart.js饼图/环形图中心重叠百分比异常，求移除方案

使用Chart.js 4.4.1结合React开发时，饼图/环形图的中心位置始终显示重叠的百分比数值，尝试过重装依赖、禁用Tooltip，问题仍未解决，需要彻底移除这些重叠数值。

这些重叠的百分比是**Chart.js数据标签插件（chartjs-plugin-datalabels）**的默认显示内容，并非Tooltip，因此禁用Tooltip无法解决问题。需要在图表配置中显式关闭数据标签的显示，或者卸载不必要的插件。

方案1：在图表配置中禁用数据标签 #

给Doughnut组件添加options配置，关闭数据标签的显示：

const chartOptions = {
  plugins: {
    datalabels: {
      display: false
    }
  }
};

将该配置传入每个Doughnut组件即可。

方案2：卸载多余插件（如果未使用） #

如果项目中不需要chartjs-plugin-datalabels插件，直接卸载即可：

npm uninstall chartjs-plugin-datalabels

import React, { useState, useEffect } 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 MonthlyTargetCharts = () => {
    const [consignmentData, setConsignmentData] = useState(null);
    const [nonConsignmentData, setNonConsignmentData] = useState(null);

    // 计算百分比辅助函数
    const calculatePercentage = (value) => (value ? parseFloat(value).toFixed(2) : "0");

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(process.env.REACT_APP_API_MONTHLY_TARGET_PRIMARY);
                if (!response.ok) throw new Error('网络响应异常');
                const jsonData = await response.json();
                if (jsonData.data?.length > 0) {
                    const data = jsonData.data[0];
                    setConsignmentData({
                        labels: ['寄售完成占比', '剩余未完成'],
                        datasets: [{
                            data: [parseFloat(data["percentage of consignment"]), 100 - parseFloat(data["percentage of consignment"])],
                            backgroundColor: ['rgba(255, 99, 132, 0.6)', 'rgba(200, 200, 200, 0.6)'],
                        }],
                    });
                    setNonConsignmentData({
                        labels: ['非寄售完成占比', '剩余未完成'],
                        datasets: [{
                            data: [parseFloat(data["percentage of non consignment"]), 100 - parseFloat(data["percentage of non consignment"])],
                            backgroundColor: ['rgba(54, 162, 235, 0.6)', 'rgba(200, 200, 200, 0.6)'],
                        }],
                    });
                } else console.error('未获取到有效数据');
            } catch (error) {
                console.error('数据请求失败:', error);
            }
        };

        fetchData();
    }, []);

    // 禁用数据标签的图表配置
    const chartOptions = {
        plugins: {
            datalabels: {
                display: false
            }
        }
    };

    return (
        <>
            <h2 className='sales-targets-title' style={{ textDecoration: 'underline' }}>销售目标</h2>
            <div style={{ display: 'flex', justifyContent: 'space-around', flexWrap: 'wrap' }}>
                {consignmentData && (
                    <div className="chart-container consignment">
                        <h2>寄售目标</h2>
                        <Doughnut data={consignmentData} options={chartOptions} key="consignmentChart" />
                        <div style={{ textAlign: 'center' }}>
                            <h3>{calculatePercentage(consignmentData.datasets[0].data[0])}% 已完成</h3>
                        </div>
                    </div>
                )}
                {nonConsignmentData && (
                    <div className="chart-container non-consignment">
                        <h2>非寄售目标</h2>
                        <Doughnut data={nonConsignmentData} options={chartOptions} key="nonConsignmentChart" />
                        <div style={{ textAlign: 'center' }}>
                            <h3>{calculatePercentage(nonConsignmentData.datasets[0].data[0])}% 已完成</h3>
                        </div>
                    </div>
                )}
            </div>
        </>
    );
};

export default MonthlyTargetCharts;

内容的提问来源于stack exchange，提问作者Jr.coder