Chartjs：双 x 轴没有相同的网格线

Question

我正在使用 Chart.js 版本 2.9.4 和 jQuery 版本 3.2.1，并且我使用图表的条形图。我想要实现的是在背景中显示一个数据条（米色），在前景中显示两个数据条（绿色和洋红色）。问题是，使用我的设置，它显示错误 - x 轴和网格线未正确对齐（我只想显示一个，但为了调试，图片中显示了两个）。

我的数据和比例代码是：

var activityData = {
            datasets: [
                {
                    label: 'Monthly plan',
                    backgroundColor: '#a3b13a',
                    data: [14000, 12000, 14000, 15000, 15000, 16000, 12000, 10000, 15000, 16000, 17000, 20000],
                    xAxisID: 'x-axis-1',
                    barPercentage: 0.4
                }, {
                    label: 'Month sales',
                    backgroundColor: '#a51b4d',
                    data: [14200, 12800, 20100],
                    xAxisID: 'x-axis-1',
                    barPercentage: 0.4
                },{
                    label: 'Last year sales',
                    backgroundColor: '#f8f1e5',
                    data: [13250, 10965, 14520, 13789, 14085, 15796, 10367, 9513, 14302, 14985, 16997, 18622 ],
                    xAxisID: 'x-axis-2'
                }],
            labels: monthNames
        }

        var myScales = {
            xAxes: [{
                display: true,
                stacked: true,
                id: "x-axis-2",
                type: 'category',
                ticks: {
                    beginAtZero: true
                }
            }, {
                display: true,
                stacked: false,
                id: "x-axis-1",
                type: 'category',
                ticks: {
                    beginAtZero: true
                }
            }],
            yAxes: [{
                stacked: false,
                ticks: {
                    beginAtZero: true
                }
            }]
        }

如何解决这个问题才能正确显示 - 背景中有一个栏，前景中有两个栏？

Answer 1

我弄明白了，以防万一有人遇到同样的问题，我不得不添加 offset: true。

    var myScales = {
        xAxes: [{
            display: true,
            stacked: true,
            id: "x-axis-2",
            type: 'category',
            offset: true,
            ticks: {
                beginAtZero: true
            }
        }, {
            display: false,
            stacked: false,
            id: "x-axis-1",
            type: 'category',
            offset: true,
            gridLines: {
                display:false
            },
            ticks: {
                beginAtZero: true
            }
        }],
        yAxes: [{
            stacked: false,
            ticks: {
                beginAtZero: true
            }
        }]
    }

Chartjs：双 x 轴没有相同的网格线

Chartjs: Double x axis not having the same gridline

javascript

charts

bar-chart

chart.js