Question

这是我的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

只能控制一个或另一个

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

1 个答案: