如何在ChartJS的堆叠柱状/折线图中添加数据标签

问题根源 #

你的代码存在几个关键问题：

• 全局datalabels配置会作用于所有数据集（包括柱状图），导致不需要的标签也显示
• 数据是字符串类型，ChartJS无法正确计算标签位置
• 全局配置里重复定义了formatter，后定义的Math.round覆盖了自定义格式化函数
• 折线数据集的datalabels配置缺少必要的锚点和对齐设置，无法控制标签位置

修正方案 #

按以下步骤修改代码：

1. 全局默认禁用数据标签
   在config的plugins.datalabels里添加display: false，这样所有数据集默认不显示标签，只在需要的数据集单独开启：

const config = {
    type: 'line',
    data: data,
    options: {
      plugins: {
        datalabels: {
          // 全局默认禁用
          display: false,
          borderRadius: 4,
          color: 'white',
          font: {
            weight: 'bold'
          },
          padding: 6
        },
        title: {
          display: true,
          text: 'Menu Performance Chart'
        },
      },
      scales: {
        y: {
          stacked: true
        }
      }
    },
  };

2. 修正数据类型为数字
   把data里的字符串数值改成数字，确保ChartJS能正确计算坐标：

const data = {
    labels: labels,
    datasets: [{
        label: 'Sub Total Sales (RM)',
        data: [111, 22, 31, 12, 71, 110, 22], // 去掉引号转数字
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        stack: 'combined',
        type: 'bar'
      },
      {
        label: 'Total Amount Sold',
        data: [11, 2, 3, 1, 7, 10, 2], // 去掉引号转数字
        borderColor: 'rgb(255, 159, 64)',
        backgroundColor: 'rgba(255, 159, 64, 0.2)',
        stack: 'combined',
        // 仅该折线数据集启用数据标签，并配置位置
        datalabels: {
          display: true,
          anchor: 'end',
          align: 'top',
          color: '#FFCE56',
          // 保留自定义格式化函数（如果需要）
          formatter: function(value) {
            return value; // 或你的GetValueFormatted函数
          }
        }
      },
    ]
  };

3. 关键配置说明

• anchor: 'end'：将标签锚定在折线数据点的末端（即数据点本身）
• align: 'top'：让标签在锚点的上方显示
• 全局display: false + 折线数据集display: true：实现仅折线图显示标签的效果

额外提示 #

如果需要保留自定义格式化函数，确保全局配置里只定义一次formatter，或者直接在数据集里单独设置，避免覆盖冲突。

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