ChartJS 4.3.2能否实现标签显示在柱状图上方？

旧版本ChartJS中，可通过以下动画代码在柱状图上方显示数据标签：

animation: {
    duration: 1,
    onComplete: function ()
    {
        var chartInstance = this.chart,
        ctx = chartInstance.ctx;
        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        this.data.datasets.forEach(function (dataset, i)
        {
            var meta = chartInstance.controller.getDatasetMeta(i);

            meta.data.forEach(function (bar, index)
            {
                var data = dataset.data[index];
                ctx.fillText(data, bar._model.x, bar._model.y - 5);
            });
        });
    }
}

升级至4.3.2版本后，该代码不再生效，以下是适配新版本的解决方案：

适配ChartJS 4.x的自定义绘制代码 #

ChartJS 4.x重构了内部API，原有的属性路径和调用方式已变更，适配后的代码如下：

animation: {
    duration: 1,
    onComplete: function() {
        const ctx = this.ctx;
        // 读取新版本全局字体配置
        const fontConfig = Chart.defaults.font;
        ctx.font = `${fontConfig.style} ${fontConfig.size}px ${fontConfig.family}`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        this.data.datasets.forEach((dataset, datasetIndex) => {
            // 新版本直接通过实例获取数据集元数据
            const meta = this.getDatasetMeta(datasetIndex);
            meta.data.forEach((bar, index) => {
                const value = dataset.data[index];
                // 新版本直接通过bar.x/bar.y获取柱子坐标
                ctx.fillText(value, bar.x, bar.y - 5);
            });
        });
    }
}

关键变更说明 #

• 实例访问：无需通过this.chart，直接使用this即可获取图表实例
• 元数据获取：改用this.getDatasetMeta(datasetIndex)替代原chartInstance.controller.getDatasetMeta(i)
• 字体配置：全局字体属性从Chart.defaults.global.defaultFont*迁移到Chart.defaults.font
• 坐标获取：柱子位置从bar._model.x/y改为直接访问bar.x/y

更简洁的替代方案：官方标签插件 #

如果自定义绘制过于繁琐，推荐使用ChartJS官方的chartjs-plugin-datalabels插件，配置更简洁且兼容性更强：

1. 安装插件

npm install chartjs-plugin-datalabels

2. 引入并配置

import Chart from 'chart.js/auto';
import ChartDataLabels from 'chartjs-plugin-datalabels';

// 注册插件
Chart.register(ChartDataLabels);

const chart = new Chart(document.getElementById('myChart'), {
    type: 'bar',
    data: { /* 你的数据集 */ },
    options: {
        plugins: {
            datalabels: {
                align: 'top',
                anchor: 'end',
                offset: -5, // 标签与柱子顶部的间距
                formatter: (value) => value // 自定义标签显示内容
            }
        }
    }
});

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