如何使用chart.js来偏移x和y轴网格点和标签？

Question

我希望我的折线图看起来像这样：https://ibb.co/F3c5QBt

这是我的JS代码：

let traffic=document.getElementById('web-traffic').getContext('2d');
var myLineChart = new Chart(traffic, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: ['16-22', '23-29', '30-5', '6-12', '13-19', '20-26', '27-3','4-10','11-17','18-24','25-31'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(226,227,247, 0.6)',
            borderColor: 'purple',
            data: [600, 700, 650, 800, 900, 950, 1000, 850, 900, 550, 1000, 2000, 1500]
        }]
    },

    // Configuration options go here
    options: {
        layout: {
            padding: {
                right: 300
            }
        },
        scales: {
            gridLines: {
                offsetGridLines: true
            },
            yAxes: [{
                ticks: {
                    min: 500,
                    max: 2500,
                    stepSize: 500
                }
            }], 
            xAxes: [{
                ticks: {
                    // labelOffset: 50
                }
            }]
        }
    }
});

我尝试设置x和y轴偏移值，但发现这是一个草率的解决方案。然后我尝试将offsetGridLines设置为true，但似乎没有效果。

数据点和标签的数量重要吗？

如何实现上面照片中标签和网格线的理想外观？

谢谢

Answer 1

该图表在网格线上和网格线之间有一些数据点。在Chart.js中不能这样做。只能使用offsetGridLines控制一个或另一个