ChartJS柱状图如何添加2020、2021年额外数据集

算力阿峰

2026-9-1

ChartJS 多年度分组柱状图配置方案

需求参考

目标实现效果：
当前已完成效果（仅2019年数据）：

问题根因

渲染不出2020、2021年数据的核心原因是数据集长度和X轴标签长度不匹配：

定义的X轴labels有3个值（2019/2020/2021），但每个dataset的data数组只传了1个2019年的数值，2020、2021年对应位置缺值，自然无法渲染。
另外第四个数据集的label重复写了FAR，对照目标图例应该为REG。

修正后的代码

ChartJS分组柱状图的规则是：每个dataset的data数组顺序必须和labels顺序严格一一对应，即数组第1位是2019年数值、第2位是2020年数值、第3位是2021年数值。替换原有data配置即可，示例里的2020、2021数值替换成真实业务数据就行：

const DATA_COUNT = 3;
const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 70};

const labels = ['2019', '2020', '2021'];
const data = {
  labels: labels,
  datasets: [
    {
      label: 'AUD',
      data: [51.01, 49.2, 48.5], // 顺序对应2019、2020、2021
      borderColor: '#3088E4',
      backgroundColor: '#3088E4',
    },
    {
      label: 'BEC',
      data: [59.98, 60.3, 57.8],
      borderColor: '#734C9D',
      backgroundColor: '#734C9D',
    },
    {
      label: 'FAR',
      data: [46.31, 47.5, 45.2],
      borderColor: '#4FA333',
      backgroundColor: '#4FA333',
    },
    {
      label: 'REG', // 修正重复的label
      data: [56.34, 57.1, 54.9],
      borderColor: '#EC990F',
      backgroundColor: '#EC990F',
    },
    {
      label: 'Cumulative',
      data: [53.41, 54.2, 52.3],
      borderColor: '#999999',
      backgroundColor: '#999999',
    }
  ]
};

效果对齐可选配置

如果要完全匹配目标图的样式，可以在图表配置里加如下options参数，实现Y轴百分比显示、隐藏X轴网格线的效果：

const config = {
  type: 'bar',
  data: data,
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true,
        max: 80,
        ticks: {
          callback: (val) => `${val}%`
        }
      },
      x: {
        grid: {
          display: false
        }
      }
    }
  }
};