Chart.js数据与标签错位、条形未对齐轴问题及内边距方案咨询

嘿，我仔细看了你的代码，问题主要出在轴的配置逻辑和数据结构上，咱们一步步来搞定：

问题根源 #

1. 轴类型搞反了：你用的是horizontalBar（水平条形图），这种图表的分类标签应该绑定在Y轴，数值轴是X轴，但你现在把X轴设成了linear线性类型，还额外加了一个无用的X轴，这直接导致标签和数据无法对应。
2. 数据结构错误：你给每个类别单独创建了一个dataset，且每个dataset的data只有单个值，Chart.js无法把这些零散的数据和labels里的类别一一匹配，自然会出现条形错位的情况。

解决方案 #

1. 修正轴配置 #

把Y轴设为category类型，对应你的labels列表；X轴作为数值轴，去掉多余的第二个X轴。

2. 调整数据结构 #

把所有类别对应的数据合并到一个dataset里（如果你的需求是每个类别一个独立条形的话），data数组的长度要和labels完全一致。

3. 添加条形内边距/间距 #

可以通过以下几个配置实现：

• barPercentage：控制条形占类别宽度的比例（0-1之间，值越小间距越大）
• categoryPercentage：控制类别组占可用宽度的比例
• Y轴的padding：设置轴两侧的内边距
• barThickness：固定条形的宽度

修正后的完整代码 #

$(window).on("load", function(){ 
    // 获取canvas上下文
    var ctx = $("#bar-multi-axis"); 

    // 图表配置选项
    var chartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        responsiveAnimationDuration:500,
        hoverMode: 'label',
        stacked: false,
        title:{
            display:false,
            text:"Chart.js Bar Chart - Multi Axis"
        },
        scales: {
            // X轴：数值轴，对应条形的长度
            xAxes: [{
                display: true,
                position: "bottom",
                gridLines: {
                    color: "#f3f3f3",
                    drawTicks: true,
                },
                scaleLabel: {
                    display: true,
                }
            }],
            // Y轴：分类轴，对应你的标签列表
            yAxes: [{
                type: "category", // 关键：设置为分类类型
                display: true,
                gridLines: {
                    color: "#f3f3f3",
                    drawTicks: true,
                },
                scaleLabel: {
                    display: false,
                },
                padding: { top: 10, bottom: 10 } // Y轴上下内边距
            }]
        }
    }; 

    // 图表数据
    var chartData = {
        labels: ["Ações", "Opções", "Termo", "BM&F", "Garantias","Tesouro Direto","Financeiro","BTC","Renda Fixa","Clubes e fundos"],
        datasets: [{
            label: "Valores",
            // 注意：data数组长度和labels完全对应，顺序一致
            data: [45, 28, -40, 25, -16, 10, -12, 50, 24, -24],
            backgroundColor: [
                "#5175E0", "#16D39A", "#F98E76", "#F00E76", "#E12E76",
                "#E98A76", "#F98A76", "#F18E76", "#D98E76", "#A98E76"
            ],
            hoverBackgroundColor: [
                "rgba(81,117,224,.8)", "rgba(22,211,154,.8)", "rgba(249,142,118,.8)",
                "rgba(240,14,118,.8)", "rgba(225,46,118,.8)", "rgba(233,138,118,.8)",
                "rgba(249,142,118,.8)", "rgba(241,142,118,.8)", "rgba(217,142,118,.8)",
                "rgba(169,142,118,.8)"
            ],
            borderColor: "transparent",
            barPercentage: 0.7, // 条形占类别宽度的70%，剩下的是间距
            categoryPercentage: 0.8 // 类别组占可用宽度的80%
        }]
    }; 

    var config = {
        type: 'horizontalBar',
        options : chartOptions,
        data : chartData
    }; 

    // 创建图表
    var lineChart = new Chart(ctx, config); 
});

额外说明 #

如果你确实需要用多个dataset（比如分组水平条形图），那每个dataset的data数组都要包含对应所有labels的值（没有数据的填0），同时确保Y轴是category类型，这样Chart.js才能正确匹配每个条形的位置。

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