如何移除Chart.js水平条形图内部非Canvas间距

嘿，我来帮你搞定这个水平条形图的间距问题！你想要移除图表自身内部的空白，让它和上方的统计信息对齐，对吧？结合你已经做的自定义配置，我调整了几个关键的选项，应该能解决你的问题：

首先，先看调整后的完整代码，我标注了新增和修改的部分：

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ['1', '2'],
        datasets: [{
            label: 'Money in',
            data: [5, 19],
            backgroundColor: [
                'rgb(0,51,160)',
                'rgb(26,121,191)'
            ],
            borderWidth: 0,
            // 新增：让条形占满分类区域，消除条形间的空白
            barPercentage: 1,
            categoryPercentage: 1
        }]
    },
    options: {
        // 新增：取消宽高比限制，让图表完全填充canvas
        maintainAspectRatio: false,
        // 新增：移除图表四周的内部内边距
        layout: {
            padding: {
                top: 0,
                right: 0,
                bottom: 0,
                left: 0
            }
        },
        scales: {
            yAxes: [{
                ticks: {
                    fontColor: 'white',
                    display: true,
                    // 修正：position需要加引号，否则会报错
                    position: 'top',
                    mirror: true,
                    beginAtZero: true,
                    fontSize: 17,
                    padding: -9,
                    z: 1
                },
                gridLines: {
                    display: false
                },
                // 新增：关闭y轴偏移，让条形对齐边缘
                offset: false
            }],
            xAxes: [{
                gridLines: {
                    display: false
                },
                ticks: {
                    beginAtZero: true,
                    display: false
                },
                // 新增：关闭x轴偏移，避免右侧出现空白
                offset: false
            }]
        },
        legend: {
            display: false
        }
    }
});

关键修改点说明： #

• layout.padding：直接把图表四周的内部内边距设为0，这是移除图表和canvas边缘空白的核心配置
• barPercentage & categoryPercentage：都设为1，让条形完全占满对应的分类空间，消除条形之间、条形与y轴之间的空隙
• offset: false：关闭坐标轴的默认偏移，确保条形和标签能精准对齐到图表边缘
• maintainAspectRatio: false：因为你给canvas设置了固定宽高，这个选项能让图表完全填充canvas，不会因为默认的宽高比限制留下空白
• 修正引号问题：之前代码里position: top缺少引号，这会导致语法错误，必须补上

如果调整后还有细微的间距，可以微调ticks.padding的值，或者检查canvas元素本身有没有设置margin/padding（不过你说问题在图表内部，所以这个概率不大）。这样修改后，你的条形图应该就能和上方的统计信息完美对齐啦！

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