我之前正好做过类似的需求，用最新版Chart.js完全可以实现分组柱状图，不需要换库！下面给你两种方案参考：

Chart.js本身虽然没有直接命名为“分组柱状图”的内置配置，但通过调整柱子的间距和数据集的组织方式，就能轻松实现你要的效果。核心思路是把每个分组对应X轴的一个标签，每个分组内的多条数据对应不同的数据集，再通过配置让同一分组的柱子挨在一起。

直接上代码示例：

HTML部分 #

<canvas id="groupedBarChart"></canvas>

JavaScript部分 #

const ctx = document.getElementById('groupedBarChart').getContext('2d');
const groupedChart = new Chart(ctx, {
    type: 'bar',
    data: {
        // 这里定义4个分组的标签，你可以换成自己的业务名称
        labels: ['分组1', '分组2', '分组3', '分组4'],
        datasets: [
            // 每个数据集对应分组内的一类数据，这里是4个数据集，每个包含4条数据
            {
                label: '数据集A',
                data: [12, 19, 3, 5],
                backgroundColor: 'rgba(255, 99, 132, 0.6)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            },
            {
                label: '数据集B',
                data: [2, 10, 5, 8],
                backgroundColor: 'rgba(54, 162, 235, 0.6)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            },
            {
                label: '数据集C',
                data: [7, 17, 14, 11],
                backgroundColor: 'rgba(255, 206, 86, 0.6)',
                borderColor: 'rgba(255, 206, 86, 1)',
                borderWidth: 1
            },
            {
                label: '数据集D',
                data: [5, 8, 12, 9],
                backgroundColor: 'rgba(75, 192, 192, 0.6)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }
        ]
    },
    options: {
        responsive: true,
        scales: {
            x: {
                // 开启偏移，让同一分组的柱子自动排列在一起
                offset: true,
                // 调整单根柱子的宽度占比（0-1之间，数值越小柱子越细）
                barPercentage: 0.7,
                // 调整整个分组内柱子的整体宽度占比
                categoryPercentage: 0.8
            },
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: '数值'
                }
            }
        },
        plugins: {
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: '分组柱状图'
            }
        }
    }
});

关键配置说明：

• scales.x.offset: true：这是实现分组的核心，它会让同一X轴标签下的多个数据集柱子紧密排列，不同标签的分组之间保留间距。
• barPercentage和categoryPercentage：用来调整柱子的宽度和分组间的间距，根据你的视觉需求微调即可。

如果需要给每个分组添加更多数据，只需要继续添加数据集或者扩展现有数据集的data数组就行。

如果觉得Chart.js的配置有点繁琐，推荐用Plotly.js，它内置支持分组柱状图，代码更简洁，上手更快：

HTML部分 #

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="plotlyGroupedBar"></div>

JavaScript部分 #

const data = [
    {
        x: ['分组1', '分组2', '分组3', '分组4'],
        y: [12, 19, 3, 5],
        name: '数据集A',
        type: 'bar'
    },
    {
        x: ['分组1', '分组2', '分组3', '分组4'],
        y: [2, 10, 5, 8],
        name: '数据集B',
        type: 'bar'
    },
    {
        x: ['分组1', '分组2', '分组3', '分组4'],
        y: [7, 17, 14, 11],
        name: '数据集C',
        type: 'bar'
    },
    {
        x: ['分组1', '分组2', '分组3', '分组4'],
        y: [5, 8, 12, 9],
        name: '数据集D',
        type: 'bar'
    }
];

const layout = {
    barmode: 'group', // 关键：直接开启分组模式
    title: '分组柱状图',
    yaxis: {title: '数值'},
    xaxis: {title: '分组'}
};

Plotly.newPlot('plotlyGroupedBar', data, layout);

只需要设置barmode: 'group'就能自动实现分组效果，Plotly还自带交互功能（比如hover提示、图例切换），非常省心。

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