Chart.js 3.5.1条形图如何为每个柱子添加数值标签

方案一：使用官方datalabels插件（最简实现） #

这是最适合新手的方案，不需要写复杂的自定义绘制逻辑，配置即可生效：

• 第一步：引入配套插件
  可通过npm安装或者CDN引入适配Chart.js 3.x的2.x版本chartjs-plugin-datalabels插件，确保在Chart.js加载完成后再引入该插件。
• 第二步：修改图表配置
  你需要在原有配置的基础上，注册插件、添加标签配置即可，修改后的完整代码如下：

  // 注册插件
  Chart.register(ChartDataLabels);
  
  let chart2 = new Chart('chart2', {
    type: 'bar',
    data: {
      labels: ["a", "b", "c", "d"],
      datasets: [{
        data: [500, 400, 300, 200],
      }]
    },
    options: {
      indexAxis: 'y',
      plugins: {
        title: {
          display: true,
          text: "Graph"
        },
        legend: {
          display: false,
        },
        // 新增datalabels配置
        datalabels: {
          // 标签显示内容为数值
          formatter: (value) => value,
          // 标签位置：柱子右侧
          anchor: 'end',
          align: 'right',
          // 标签颜色，可根据需求调整
          color: '#000',
          // 标签和柱子的间距
          offset: 4
        }
      },
      scales: {
        y: {
          grid: {
            display: false
          },
        },
        x: {
          grid: {
            display: false
          },
          // 给x轴加10%的额外 padding，避免标签超出画布被截断
          max: (context) => context.chart.data.datasets[0].data.reduce((a,b) => Math.max(a,b), 0) * 1.1
        }
      }
    },
    // 激活插件
    plugins: [ChartDataLabels]
  });
  

方案二：无插件自定义实现 #

如果不想引入额外插件，可以通过动画完成回调手动绘制标签：

let chart2 = new Chart('chart2', {
  type: 'bar',
  data: {
    labels: ["a", "b", "c", "d"],
    datasets: [{
      data: [500, 400, 300, 200],
    }]
  },
  options: {
    indexAxis: 'y',
    animation: {
      onComplete: function() {
        const ctx = this.ctx;
        ctx.font = '12px sans-serif';
        ctx.fillStyle = '#000';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        this.data.datasets[0].data.forEach((value, index) => {
          const meta = this.getDatasetMeta(0);
          const bar = meta.data[index];
          ctx.fillText(value, bar.x + 4, bar.y);
        })
      }
    },
    plugins: {
      title: {
        display: true,
        text: "Graph"
      },
      legend: {
        display: false,
      }
    },
    scales: {
      y: {
        grid: {
          display: false
        },
      },
      x: {
        grid: {
          display: false
        },
        max: 550
      }
    }
  }
});

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