如何在Chart.js分组柱状图中添加组标签与单柱独立标签？

你要的两类标签，一类是分组标签（比如示例里的年龄组），另一类是每个柱子的专属标签（Male/Female），不能把后者做成图例，得直接显示在柱子上。之前把标签塞datasets里没用，是因为datasets的label默认是用来生成图例的，要实现目标得这么做：

1. 调整数据结构，把标签绑到单个数据点上 #

别把Male/Female放到dataset的label字段，而是给每个数据点加自定义标签属性，比如用对象存每个柱子的数值和标签：

const chartData = {
  // x轴的分组标签（比如年龄组）
  labels: ['18-24', '25-34', '35-44', '45-54', '55+'],
  datasets: [
    {
      data: [
        { y: 25, label: 'Male' },
        { y: 32, label: 'Male' },
        { y: 28, label: 'Male' },
        { y: 21, label: 'Male' },
        { y: 15, label: 'Male' }
      ],
      backgroundColor: '#36A2EB',
      // 关掉这个数据集的图例显示
      pointRadius: 0
    },
    {
      data: [
        { y: 22, label: 'Female' },
        { y: 28, label: 'Female' },
        { y: 24, label: 'Female' },
        { y: 19, label: 'Female' },
        { y: 12, label: 'Female' }
      ],
      backgroundColor: '#FF6384',
      pointRadius: 0
    }
  ]
};

2. 用插件渲染每个柱子的标签 #

推荐用chartjs-plugin-datalabels插件，专门用来给数据点加自定义标签：

• 先引入插件：

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

• 然后在图表配置里启用插件，设置标签的显示规则：

const chartConfig = {
  type: 'bar',
  data: chartData,
  options: {
    // 直接关掉默认图例，因为我们不需要Male/Female当图例
    legend: {
      display: false
    },
    scales: {
      x: {
        title: {
          display: true,
          text: '年龄组' // 分组标签的标题，对应示例里的Age Groups
        }
      },
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: '人数'
        }
      }
    },
    plugins: {
      datalabels: {
        // 提取每个数据点的label属性作为显示文本
        formatter: (value) => value.label,
        color: '#000',
        // 把标签放在柱子顶部居中
        anchor: 'center',
        align: 'top'
      }
    }
  },
  // 注册插件
  plugins: [ChartDataLabels]
};

// 初始化图表
new Chart(document.getElementById('myChart'), chartConfig);

3. 额外优化（可选） #

如果想让x轴的分组标签更醒目，可以给x轴刻度加样式：

scales: {
  x: {
    ticks: {
      font: {
        weight: 'bold' // 分组标签加粗
      }
    },
    title: {
      display: true,
      text: '年龄组',
      font: {
        size: 16,
        weight: 'bold'
      }
    }
  }
}

关键提醒 #

• 核心是把Male/Female这类标签绑定到单个数据点上，而不是放到dataset的label里——后者是用来生成图例的，不符合你的需求。
• 不用插件也能实现，比如用Chart.js的afterDraw钩子自己绘制标签，但插件更省事，代码也更整洁。

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