如何让多数据集的Chart.js水平条形图实现居中对齐？

你的水平条形图中两个数据集分别集中在不同的Y轴标签组，导致单个标签下的条形上下偏移并重叠，要实现所有条形与标签居中对齐，只需在图表配置中添加Y轴的条形布局控制参数：

修改后的图表配置代码：

const chartLoc = document.getElementById('chart').getContext('2d');
chart = new Chart(chartLoc, {
    type:'bar',
    data: jsonvar,
    options: {
        indexAxis: 'y',  
        layout: {
            padding: {
                right: 100
            }
        },
        scales: {
            y: {
                barPercentage: 0.6, // 控制条形占标签高度的比例，小于1时会留出上下空白实现居中
                categoryPercentage: 1 // 让标签组之间无额外间距，保持紧凑
                // 若需要固定条形厚度，可替换上面两个参数为：
                // barThickness: 25,
            }
        },
        plugins: {
            datalabels: {
                labels: {
                    label: {
                        anchor: "end",
                        align: "end",
                        clip: false,
                    }
                }
            }
        }
    },
    plugins: [ChartDataLabels],
});

数据结构保持不变：

const jsonvar = {
    "labels":["Label 1","Label 2","Label 3","Label 4","Label 5","Label 6"],
    "datasets":[
        {
            "label":"Version 1",
            "data":[null,null,null,1,2,3]},
        {
            "label":"Version 2",    
            "data":[1,2,3,null,null,null]
        }
    ]
}

原理说明：

• barPercentage设置条形在对应Y轴标签高度内的占比，当值小于1时，剩余空间会均匀分配在条形上下，自然实现居中对齐；
• categoryPercentage设为1可以消除标签组之间的额外间距，避免布局松散；
• 若需要固定条形厚度，直接使用barThickness参数定义具体像素值，效果更可控。

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