作者:沉淑梅志毓 | 来源:互联网 | 2023-01-22 11:49
我想覆盖Chart JS中的漂亮数字算法,并在y轴上只显示两个标签(或刻度):值的最大值和最小值.这些值都是浮点数.我看到回调函数(yAxis.ticks.callback)已经找到了勾号,所以我不认为这是做这件事的地方.任何帮助,将不胜感激.
1> ɢʀᴜɴᴛ..:
您可以使用以下回调函数进行y轴刻度来实现:
callback: function(value, index, values) {
if (index === values.length - 1) return Math.min.apply(this, dataArr);
else if (index === 0) return Math.max.apply(this, dataArr);
else return '';
}
注意:您必须为数据值(此处为dataArr
)使用单独的数组,而不是内联数组.
编辑:
在y轴ticks配置中添加以下内容,使数据点与刻度完全对齐:
min: Math.min.apply(this, dataArr),
max: Math.max.apply(this, dataArr)
ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇ
var dataArr = [154.23, 203.21, 429.01, 637.41];
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr'],
datasets: [{
label: 'LINE',
data: dataArr,
backgroundColor: 'rgba(0, 119, 290, 0.2)',
borderColor: 'rgba(0, 119, 290, 0.6)',
fill: false,
tension: 0
}]
},
options: {
scales: {
yAxes: [{
ticks: {
min: Math.min.apply(this, dataArr),
max: Math.max.apply(this, dataArr),
callback: function(value, index, values) {
if (index === values.length - 1) return Math.min.apply(this, dataArr);
else if (index === 0) return Math.max.apply(this, dataArr);
else return '';
}
}
}]
}
}
});