如何在Chart.js堆叠柱状图的每个柱体中显示数据数值？

当然可以用Chart.js实现堆叠柱状图每个柱体显示对应数据数值的效果，下面针对你的问题给出具体解决方案：

关于Chart.data.datasets不存在的问题 #

你直接调用全局构造函数Chart上的data.datasets是错误的——Chart是创建图表的类，只有你初始化后得到的图表实例才包含data及datasets属性。比如你初始化代码是：

const myChart = new Chart(ctx, {...});

此时应该访问myChart.data.datasets，而非Chart.data.datasets。

实现柱体显示数据数值的两种方法 #

方法1：使用chartjs-plugin-datalabels插件（推荐） #

这是Chart.js官方维护的标签插件，配置简单，适配性好：

1. 引入插件（CDN或npm安装）
2. 在图表配置中启用插件并设置标签样式：

const ctx = document.getElementById('stackedBar').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [
      {
        label: '销售额A',
        data: [1200, 1900, 3000, 5000],
        backgroundColor: 'rgba(255, 99, 132, 0.7)',
        stack: 'sales'
      },
      {
        label: '销售额B',
        data: [1500, 2200, 2800, 4500],
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
        stack: 'sales'
      }
    ]
  },
  options: {
    plugins: {
      datalabels: {
        anchor: 'center',
        align: 'center',
        color: '#ffffff',
        font: {
          weight: 'bold',
          size: 14
        },
        formatter: (value) => value // 直接显示数据值，可自定义格式如`$${value}`
      }
    },
    scales: {
      y: { stacked: true },
      x: { stacked: true }
    }
  }
});

方法2：自定义动画完成回调（无需额外插件） #

如果不想引入插件，可以在图表的animation.onComplete回调中手动绘制文本：

const ctx = document.getElementById('stackedBar').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [
      {
        label: '销售额A',
        data: [1200, 1900, 3000, 5000],
        backgroundColor: 'rgba(255, 99, 132, 0.7)',
        stack: 'sales'
      },
      {
        label: '销售额B',
        data: [1500, 2200, 2800, 4500],
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
        stack: 'sales'
      }
    ]
  },
  options: {
    animation: {
      onComplete: function() {
        const ctx = this.chart.ctx;
        // 设置文本样式
        ctx.font = 'bold 14px Arial';
        ctx.fillStyle = '#fff';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // 遍历每个数据集和数据点，绘制文本
        this.data.datasets.forEach(dataset => {
          dataset._meta[Object.keys(dataset._meta)[0]].data.forEach((bar, index) => {
            const barModel = bar._model;
            ctx.fillText(dataset.data[index], barModel.x, barModel.y);
          });
        });
      }
    },
    scales: {
      y: { stacked: true },
      x: { stacked: true }
    }
  }
});

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