Chart.js 4.4.0饼图扇区值无法显示求助（2.9.3版本可用）

问题原因 #

• 你使用的chartjs-plugin-labels插件未适配Chart.js 4.x版本（该插件最后更新于2020年，仅支持Chart.js 2.x），因此无法在4.4.0中正常工作。
• 原代码脚本执行时机错误：脚本写在canvas元素之前，导致初始化图表时无法获取到DOM元素，图表根本无法渲染。

解决方案 #

使用Chart.js官方推荐的、兼容4.x版本的chartjs-plugin-datalabels插件，同时调整脚本执行顺序：

修改后的完整代码 #

<div class="ChartBoxPie">
    <canvas id="AccDefchart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script>
<script>
// 注册数据标签插件
Chart.register(ChartDataLabels);

// setup AccDefChart
const data = {
    labels: ['Accepted', 'Deficit'],
    datasets: [{
        label: 'Accepted Leads Deficit Leads',
        data: [12, 19],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
        ],
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)'
        ],
        borderWidth: 1
    }]
};

// config AccDef
const AccDef = {
    type: 'pie',
    data,
    options: {
        plugins: {
            datalabels: {
                display: true,
                formatter: function(value) {
                    return value; // 直接显示数值
                },
                color: '#333', // 标签颜色
                font: {
                    weight: 'bold'
                }
            }
        }
    }
};

// render AccDefChart
const myChart = new Chart(
    document.getElementById('AccDefchart'),
    AccDef
);
</script>

关键修改说明 #

• 调整DOM顺序：将canvas元素放在脚本之前，确保初始化图表时能获取到DOM节点。
• 替换插件：用chartjs-plugin-datalabels替代旧的chartjs-plugin-labels，该插件持续维护，完全兼容Chart.js 4.x。
• 注册插件：通过Chart.register(ChartDataLabels)手动注册插件（Chart.js 3.x+需要显式注册插件）。
• 配置数据标签：在options.plugins.datalabels中设置显示规则，可自定义数值显示、颜色、字体等样式。

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