使用Chart.js绘制分组柱状图，如何为每个柱状条添加对应名称？

核心思路
要给分组柱状图的每个柱子单独设置名称，需要调整后端返回的数据结构，让每个分组下的柱子数据携带名称信息，再通过Chart.js的tooltips或plugins（v3+用tooltip）来自定义提示内容，或者通过dataLabels插件直接在柱子上显示名称。

步骤1：调整后端数据格式 #

把原来的分组数据改成包含分组类型、柱子名称、数值的结构，比如返回一个数组：

// 后端返回的JSON结构示例
[
  { "group": "Interface", "name": "NASC-02", "value": 10 },
  { "group": "Interface", "name": "NASC-03", "value": 15 },
  { "group": "Function", "name": "FUNC-01", "value": 8 },
  { "group": "Function", "name": "FUNC-02", "value": 12 }
]

步骤2：前端处理数据并配置Chart.js #

处理数据 #

先把后端数据转换成Chart.js需要的结构：

// 假设后端返回的数据存在response.data中
const rawData = response.data;
const groups = [...new Set(rawData.map(item => item.group))]; // ["Interface", "Function"]
const datasets = groups.map(group => {
  const groupData = rawData.filter(item => item.group === group);
  return {
    label: group,
    data: groupData.map(item => item.value),
    // 存储柱子名称，后续tooltip用
    names: groupData.map(item => item.name)
  };
});

配置Chart.js（v3+版本） #

通过tooltip的回调函数显示柱子名称，或者用chartjs-plugin-datalabels直接在柱子上标注：

// 引入chartjs-plugin-datalabels（如果需要柱子上显示名称）
import ChartDataLabels from 'chartjs-plugin-datalabels';

const chart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: groups, // X轴分组
    datasets: datasets
  },
  options: {
    responsive: true,
    plugins: {
      tooltip: {
        callbacks: {
          // 自定义tooltip内容，显示柱子名称和数值
          label: function(context) {
            const dataset = context.dataset;
            const name = dataset.names[context.dataIndex];
            return `${name}: ${dataset.data[context.dataIndex]}`;
          }
        }
      },
      // 如果需要在柱子上显示名称，启用datalabels插件
      datalabels: {
        anchor: 'end',
        align: 'top',
        formatter: function(value, context) {
          return context.dataset.names[context.dataIndex];
        }
      }
    },
    scales: {
      x: {
        stacked: false, // 分组柱状图关闭堆叠
        title: {
          display: true,
          text: '类型'
        }
      },
      y: {
        title: {
          display: true,
          text: '数值'
        }
      }
    }
  },
  plugins: [ChartDataLabels] // 注册插件
});

步骤3：旧版Chart.js（v2）适配 #

如果用的是v2版本，配置逻辑类似，只是tooltip和插件配置位置不同：

const chart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: groups,
    datasets: datasets
  },
  options: {
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          const dataset = data.datasets[tooltipItem.datasetIndex];
          const name = dataset.names[tooltipItem.index];
          return `${name}: ${dataset.data[tooltipItem.index]}`;
        }
      }
    },
    plugins: {
      datalabels: {
        formatter: function(value, context) {
          return context.dataset.names[context.dataIndex];
        }
      }
    }
  },
  plugins: [ChartDataLabels]
});

关键说明

• 后端数据调整是核心：必须把每个柱子的名称和所属分组、数值绑定，这样前端才能准确对应。
• 如果不需要在柱子上显示名称，只需要tooltip显示，不用引入chartjs-plugin-datalabels，仅配置tooltip回调即可。
• 分组柱状图的X轴是分组（Interface/Function），每个分组下的多个柱子由不同dataset或者同一dataset的多个数据点实现（这里用的是多个dataset，每个dataset对应一个分组下的所有柱子）。

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