使用图表js向Y轴添加缓冲区

Question

有时图表值与图表高度相同。例如，我的图片红色条为6，与y轴顶部数字相同。我可以添加一些缓冲区以使图表栏永远不会到达y轴的顶部吗？假设y轴现在变为7（或类似值）。

图像显示了我的问题（在新窗口中打开图像以获得更好的视图）

Answer 1

通过Axis Range Settings

https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#axis-range-settings

suggestedMax: 7

基本示例

将最小值更改为10，将最大值更改为90（对于数据[30、40、50、60]）。

let chart = new Chart(ctx, {
    type: 'line',
    responsive: true,
    data: {
        datasets: [{
            label: 'First dataset',
            data: [30, 40, 50, 60]
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    suggestedMin: 10,
                    suggestedMax: 90
                }
            }]
        }
    }
});

<canvas id="ctx" width="800" height="350"></canvas>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>