我明白你遇到的困扰了，chartjs-plugin-datalabels的配置确实需要注意几个关键细节，我来一步步帮你把百分比标签正常显示出来：

第一步：确保插件正确引入 #

首先得保证引入顺序正确——先引入Chart.js，再引入chartjs-plugin-datalabels插件，如果用CDN的话，把这两行放在你的canvas标签之前：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script>

第二步：补全Chart配置并启用插件 #

你的代码没写完，我帮你补全完整的初始化逻辑，重点是在配置里启用datalabels并设置百分比格式化规则：

<canvas id="bar-chart" width="800" height="450"></canvas>

<script>
// 你的原始数据
const valuedata = [2478,5267,734,784,433];
const valuelabel = ["Africa", "Asia", "Europe", "Latin America", "North America"];
// 先计算数据总和，用来算百分比
const total = valuedata.reduce((sum, num) => sum + num, 0);

new Chart(document.getElementById('bar-chart'), {
    type: 'bar',
    data: {
        labels: valuelabel,
        datasets: [{
            label: 'Population',
            data: valuedata,
            backgroundColor: ['#3e95cd', '#8e5ea2','#3cba9f','#e8c3b9','#c45850']
        }]
    },
    options: {
        plugins: {
            datalabels: {
                // 开启标签显示
                display: true,
                // 格式化标签为百分比（保留两位小数）
                formatter: (value) => {
                    const percentage = ((value / total) * 100).toFixed(2);
                    return `${percentage}%`;
                },
                // 设置标签样式
                color: '#fff',
                font: {
                    weight: 'bold',
                    size: 12
                },
                // 标签位置：柱子顶部
                anchor: 'end',
                align: 'top'
            }
        },
        scales: {
            y: {
                beginAtZero: true
            }
        }
    },
    // 必须注册插件！这一步很容易遗漏
    plugins: [ChartDataLabels]
});
</script>

关键注意事项 #

• 插件注册：最后一行的plugins: [ChartDataLabels]是核心，没加的话插件完全不会生效
• 百分比计算：用reduce先算出总和，再在formatter里实时计算每个数据占比，比提前生成百分比数组更灵活
• 标签位置：anchor和align可以调整标签位置，比如改成anchor: 'center', align: 'center'就能把标签放在柱子中间

这样配置后，每个柱子上就会显示对应的百分比标签了，你可以根据需求调整字体大小、颜色等样式。

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