Chart.js柱状图（barchart）如何缩小柱子之间的间距

柱状图间距调整方案 #

你当前使用的是Chart.js柱状图组件，控制柱子间距的核心配置已经包含在你提供的代码片段中，只需调整对应参数即可实现缩小间距的需求。

你当前的柱状图效果参考：

调整逻辑说明

控制柱子间距的两个核心参数位于datasets配置段内：

• barPercentage：控制单根柱子在所属类目分配宽度中的占比，取值范围0-1，数值越大柱子越宽，同类目下多柱子的间距越小
• categoryPercentage：控制单类目整体宽度在x轴对应区间的占比，取值范围0-1，数值越大类目占比越高，不同类目之间的间距越小

你当前已经将两个参数设置为1.0，这是该配置下能达到的最小间距，如果依然觉得空白太多，还可以在x轴配置中添加offset: false，关闭x轴两端的默认留白，进一步压缩空白区域。

调整后的完整代码示例

barchart = new Chart(myChart, {
    type:'bar',
    data:{
        labels: {{ data.x_vals | tojson }},
        datasets:[{
            label:'Liquid Level',
            data:{{ data.y_vals }},
            backgroundColor: gradient,
            borderWidth:1, //Effects plotted line on chart
            borderColor:'white',
            hoverBorderWidth:1,
            hoverBorderColor:'#000',
            barPercentage: 1.0, // 可在0-1区间内上调，缩小同类目间距
            categoryPercentage: 1.0 // 可在0-1区间内上调，缩小类目间间距
        }]
    },
    options:{
        // legend is here
    },
    scales: {
        // yAxes is here
        xAxes: [{
            display: true,
            offset: false, // 新增该行关闭x轴两端留白
            ticks: {
                autoSkip: true,
                padding: 4,
                fontSize: 12
            }
        }]
    }
})

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