如何调整Chart.js柱状图中指定两列的间距？

方法一：插入空数据点（简单易实现） #

如果需要拉开特定两列的距离，比如在第3列和第4列之间加大间距，可以在对应位置插入值为null的数据点，同时配置x轴隐藏空数据点的标签，视觉上模拟出间距效果：

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['列1', '列2', '列3', '', '列4', '列5'], // 插入空标签占位
        datasets: [{
            label: '数据',
            data: [12, 19, 3, null, 5, 2], // 对应位置插入null
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(0,0,0,0)', // 空数据点设为透明
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(0,0,0,0)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            x: {
                ticks: {
                    // 隐藏空标签，避免显示空白
                    callback: function(value, index, values) {
                        return this.getLabelForValue(index) || '';
                    }
                }
            },
            y: {
                beginAtZero: true
            }
        }
    }
});

这种方式通过“占位空柱子”实现间距，无需额外插件，适合简单场景。

方法二：自定义插件（灵活无侵入） #

如果不想修改原始数据，可以通过Chart.js的自定义插件，在图表布局完成后调整特定柱子的位置：

const ctx = document.getElementById('myChart').getContext('2d');
// 自定义插件：调整指定区域的柱子间距
const adjustBarSpacingPlugin = {
    afterLayout: function(chart) {
        const bars = chart.getDatasetMeta(0).data;
        // 示例：拉开第3个和第4个柱子的间距（索引从0开始，目标为索引3及右侧柱子）
        const targetStartIndex = 3; // 要偏移的起始柱子索引
        const offset = 20; // 偏移量（单位：px，可按需调整）
        
        // 将目标索引及右侧的所有柱子向右偏移
        for (let i = targetStartIndex; i < bars.length; i++) {
            bars[i].x += offset;
        }
    }
};

const myChart = new Chart(ctx, {
    type: 'bar',
    plugins: [adjustBarSpacingPlugin], // 注册自定义插件
    data: {
        labels: ['列1', '列2', '列3', '列4', '列5'],
        datasets: [{
            label: '数据',
            data: [12, 19, 3, 5, 2],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

该插件在图表布局完成后修改柱子的x坐标，不会影响原始数据结构，适合动态调整或复杂场景。

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