Chartjs:如何在 y 轴上仅显示最大值和最小值

Question

使用图表.js，我只想在y轴上显示两个标签(或刻度(：值的最大值和最小值。这些值都是浮点数。

我不确定回调函数yAxis.ticks.callback是否是这样做的地方。

Answer 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 轴刻度配置中添加以下内容，使数据点与刻度完美对齐：

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 '';
}
}
}]
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>