Chart.js柱状图双X轴对齐问题求助

嘿，我懂你做双X轴柱状图时遇到的对齐烦恼——顶部轴居中、底部轴左对齐，网格和标签错位确实挺闹心的！咱们只需要调整两个X轴的配置参数，就能让它们完美匹配对齐。

关键修改思路 #

问题根源是两个X轴的默认对齐规则不一致，咱们要给两个轴都明确设置居中对齐的配置：

• 给每个X轴添加 align: 'center'，确保轴本身的位置居中
• 在ticks配置里设置 align: 'center'，让刻度标签也居中显示
• 确保offset属性为false（默认就是这个值，除非你之前手动改过），这样网格线会和柱状图的中心精准对齐

修改后的完整配置示例 #

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        // 底部X轴的刻度标签
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
        datasets: [{
            label: 'Sales',
            data: [12, 19, 3, 5, 2],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            // 底部X轴配置
            x: {
                align: 'center',
                ticks: {
                    align: 'center'
                },
                grid: {
                    drawOnChartArea: true
                }
            },
            // 顶部X轴配置
            x1: {
                position: 'top',
                align: 'center',
                ticks: {
                    align: 'center'
                },
                grid: {
                    drawOnChartArea: true
                },
                // 顶部X轴的刻度标签（数量要和底部轴完全一致）
                labels: ['Q1', 'Q1', 'Q1', 'Q2', 'Q2']
            }
        }
    }
});

额外提醒 #

如果你的顶部X轴是分组类标签（比如季度对应多个月份），一定要保证顶部轴的标签数量和底部轴完全相同——每个底部轴的刻度都对应一个顶部轴的标签，这样才能让网格线和标签完全对齐。

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