如何用ChartJS实现横向条形图并设置X轴0-100刻度？

云上老周

2026-8-3

解决方案

你的代码存在两个关键问题，导致横向条形图配置失效、X轴范围设置不生效：

1. Y轴配置格式错误

scales.y被写成了数组格式[{ stacked: true }]，但Chart.js要求每个轴的配置是对象而非数组，这会直接导致轴配置不生效，进而干扰X轴的范围设置。

2. 冗余配置（可优化）

数据集里的axis: 'y'属于冗余配置，因为已经通过indexAxis: 'y'指定了横向条形图，该配置可直接移除。

修正后的完整JavaScript代码

var chartContainer2 = document.getElementById('skills0');
var ctxSkills = chartContainer2.getContext('2d');

const data = {
    labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
    datasets: [{
        label: 'My First Dataset',
        data: [65, 59, 80, 81, 56, 55, 40],
        fill: false,
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 159, 64, 0.2)',
            'rgba(255, 205, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(201, 203, 207, 0.2)'
        ],
        borderColor: [
            'rgb(255, 99, 132)',
            'rgb(255, 159, 64)',
            'rgb(255, 205, 86)',
            'rgb(75, 192, 192)',
            'rgb(54, 162, 235)',
            'rgb(153, 102, 255)',
            'rgb(201, 203, 207)'
        ],
        borderWidth: 1
    }]
};

var chartBar = new Chart(chartContainer2, {
    type: 'bar',
    data,
    options: {
        indexAxis: 'y',
        scales: {
            x: {
                min: 0,
                max: 100,
                stacked: true
            },
            y: { // 此处从数组改为对象格式
                stacked: true
            }
        }
    }
});