Chart.js柱状图datalabels插件无法显示数据标签求助

你遇到的问题主要有三个原因：

• 未在Chart实例中注册datalabels插件（Chart.js v3+版本需要显式注册）
• 数据标签配置里的Color首字母大写，不符合插件的配置规范（应该是小写color）
• Chart.js v3+的坐标轴配置结构变更，原yAxes数组写法已废弃，需改为单轴对象配置

以下是修正后的完整代码：

修正后的HTML代码 #

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gráficas</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@latest/dist/Chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
</head>
<body>
    <h1>Gráfica de Barras</h1>
    <canvas id="grafica"></canvas>
    <script src="ark.js"></script>
</body>
</html>

修正后的ark.js代码 #

const $grafica = document.querySelector("#grafica");
const etiquetas = ["Mayo 22","Juni 22","Juli 22"]

const Continuo = {
    label: "Continuo",
    data: [0, 0, 1000],
    backgroundColor: 'rgba(54, 162, 235, 0.2)',
    borderColor: 'rgba(54, 162, 235, 1)',
    borderWidth: 1,
    datalabels: {
        color: '#FFCE56' // 修正为小写color
    }
};

const Estatico = {
    label: "Estático",
    data: [1702, 2321, 6360],
    backgroundColor: 'rgba(255, 159, 64, 0.2)',
    borderColor: 'rgba(255, 159, 64, 1)',
    borderWidth: 1,
    datalabels: {
        color: '#FFCE56' // 修正为小写color
    }
};

new Chart($grafica, {
    type: 'bar',
    data: {
        labels: etiquetas,
        datasets: [Continuo, Estatico]
    },
    plugins: [ChartDataLabels], // 显式注册datalabels插件
    options: {
        responsive: true,
        scales: {
            y: { // 修正v3+的坐标轴配置，替换原yAxes数组
                ticks: {
                    beginAtZero: true
                }
            }
        },
        plugins: {
            datalabels: {
                // 可添加全局数据标签配置，比如对齐方式、字体等
                anchor: 'end',
                align: 'top',
                font: {
                    weight: 'bold'
                }
            }
        }
    }
});

关键修改点说明： #

1. 注册插件：在Chart实例的配置中添加plugins: [ChartDataLabels]，确保插件被启用。
2. 修正配置键名：将datalabels中的Color改为color，符合插件的配置要求。
3. 更新坐标轴配置：Chart.js v3+不再使用yAxes数组，改为y对象配置坐标轴属性。

这样修改后，柱状图的柱子上就能正常显示数据标签了。

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