Chart.js V4：如何为每个条形添加独立标签并保留切换功能？

解决思路 #

Chart.js V4内置标签功能无法直接满足多数据集条形下方单独加标签的需求，使用官方维护的chartjs-plugin-datalabels插件是最稳妥的方案——既能实现每个条形下方的自定义标签，还能保留多数据集的颜色区分和图例切换功能。

具体实现步骤 #

1. 安装/引入插件 #

• npm安装：

  npm install chartjs-plugin-datalabels
  

• 静态页面可直接用CDN引入：

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

2. 注册插件 #

模块化项目（如Vue/React）需手动注册插件：

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

Chart.register(ChartDataLabels);

CDN引入时插件会自动注册，无需额外操作。

3. 配置图表（含标签设置） #

以下是完整配置示例，可直接替换你现有代码，核心是在每个数据集里配置datalabels选项：

const ctx = document.getElementById('yourChartId').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['分类1', '分类2', '分类3'], // 横轴主分类标签
    datasets: [
      {
        label: '数据集A',
        data: [12, 19, 3],
        backgroundColor: 'rgba(255, 99, 132, 0.6)',
        // 数据集专属标签配置
        datalabels: {
          display: true,
          anchor: 'center', // 标签对齐条形中心
          align: 'bottom', // 标签放在条形正下方
          // 自定义标签内容，此处显示数据集名称
          formatter: (val, ctx) => ctx.dataset.label,
          color: '#333',
          font: { weight: 'bold' }
        }
      },
      {
        label: '数据集B',
        data: [23, 15, 7],
        backgroundColor: 'rgba(54, 162, 235, 0.6)',
        datalabels: {
          display: true,
          anchor: 'center',
          align: 'bottom',
          formatter: (val, ctx) => ctx.dataset.label,
          color: '#333',
          font: { weight: 'bold' }
        }
      }
    ]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top', // 保留图例，点击可切换对应数据集显示/隐藏
      }
    },
    scales: {
      y: { beginAtZero: true },
      x: {
        padding: { bottom: 25 } // 给横轴底部留空间，避免标签被截断
      }
    }
  }
});

重点说明 #

• 标签内容灵活定制：formatter函数可返回任意内容，比如数据值、自定义文本，示例中用ctx.dataset.label显示数据集名称。
• 位置精准控制：anchor和align组合决定标签位置，center+bottom对应条形正下方，可尝试start/end参数调整位置。
• 图例切换正常生效：每个数据集独立配置，点击图例时对应的条形和标签会同步显示/隐藏，无需额外逻辑。
• 样式统一优化：若所有数据集标签样式一致，可将公共配置放到options.plugins.datalabels中，减少重复代码：

  options: {
    plugins: {
      datalabels: {
        display: true,
        anchor: 'center',
        align: 'bottom',
        color: '#333',
        font: { weight: 'bold' }
      }
    }
  }
  

  之后每个数据集只需配置formatter即可。

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