数据始终是 -10 到 10 之间的整数,包括 0,因此 y 轴上最多可以有 21 个“间隔”。
无论数据如何,我都需要 y 轴以 1 为增量显示从 -10 到 10(包括 0)。因此,无论数据如何,我都需要 y 轴上总共 21(刻度?)。
我根据文档尝试了这个: 我也尝试过没有步骤参数:
options: {
scales: {
y: {
max: -10,
min: 10,
ticks: {
steps: 21,
stepSize: 1
}
}
}
}
代码中缺少的部分是
autoSkip: false
。
y: {
max: 10,
min: -10,
ticks: {
stepSize: 1,
autoSkip: false
}
}
根据Chart.js文档,
默认为autoskip
。true
:如果autoskip
,自动计算可以显示多少个标签并相应地隐藏标签。 (...) 关闭true
无论如何都会显示所有标签。autoSkip
请查看下面的可运行代码并了解它是如何工作的。
new Chart('canvas', {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F'],
datasets: [{
label: 'Dataset 1',
data: [3, 9, 7, 5, 9, 2],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
fill: false
},
{
label: 'Dataset 2',
data: [1, 2, -3, -5, -2, 1],
backgroundColor: 'rgba(255, 159, 64, 0.2)',
borderColor: 'rgb(255, 159, 64)'
}
]
},
options: {
scales: {
y: {
max: 10,
min: -10,
ticks: {
stepSize: 1,
autoSkip: false
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="canvas"></canvas>
您可以使用以下代码管理刻度计数:
options: {
scales: {
x: {
ticks: {
maxTicksLimit: value
}
},
y: {
ticks: {
maxTicksLimit: value
}
}
}
}