我使用vue-chartjs作为chartjs的包装。我有一个简单的折线图与随机数据,但坚持如何设置修正值,以显示在图表的y轴。目前我有0-100的随机数据。现在,我想要实现的只是在y轴上显示0-100
,无论随机值是从putData: function () {
this.datacollection = {
labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
datasets: [{
lineTension: 0,
borderWidth: 1,
borderColor: '#F2A727',
pointBackgroundColor:[ '#fff', '#fff', '#fff', '#fff', '#fff', '#F2A727'],
backgroundColor: 'transparent',
data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
}]
}
},
getRandomInt: function () {
return Math.floor(Math.random() * (95)) + 5
}
开始。
示例脚本
{{1}}
非常感谢任何帮助。
答案 0 :(得分:3)
要实现这一目标,您需要在图表选项中为y轴刻度设置 stepSize: 50
和 maxTicksLimit: 3
:
scales: {
yAxes: [{
ticks: {
stepSize: 50,
maxTicksLimit: 3
}
}]
}
答案 1 :(得分:1)
以上答案是正确的。 对于那些感兴趣的人,我发布了 Chart.js 最新版本的代码
更新到 Chart.js v3.2.0(不向后兼容 v2.xx)
如果您的随机数据值都在接近 50 的中间范围内,为了避免自动缩放,请执行以下操作:
添加 min: 0
和 max: 100
,因此您强制图表准确显示包括 0 在内的 3 个刻度,因此 maxTicksLimit: 3
:
100
50
0
<script>
// ...
options: {
scales: {
y: {
min: 0,
max: 150,
ticks: {
stepSize: 50,
maxTicksLimit: 3
}
}
}
};
// ...
</script>
来源:https://www.chartjs.org/docs/latest/axes/#tick-configuration
(请注意,在新版本 v3.xx 中,min: 0
和 max: 100
现在位于外部刻度对象,而在 < strong>v2.xx 它曾经在 ticks 对象内)。