您好我有一天中每小时的数据集列表,如下所示:
{"x":"2017-10-14T00:00:00","y":95},{"x":"2017-10-14T01:00:00","y":62},...,{"x":"2017-10-14T23:00:00","y":23}
我想在x轴上以四小时的时间单位显示它们,所以设置如下:
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
'hour': 'HH:mm'
},
unit: 'hour',
stepSize: 4
}
}]
}
然而,图表js会在x轴的末尾显示最后/最大值'23:00',这非常烦人,因为每个滴答是4小时的差异。请问如何在x轴上禁用最后/最大值?
答案 0 :(得分:1)
您可以使用x轴'刻度的回调函数来隐藏/禁用最后一个值,如下所示:
scales: {
xAxes: [{
ticks: {
callback: function(tick) {
// if tick/value is not equals to '23:00'
// then return the tick/value
// else return an empty string
return tick !== '23:00' ? tick : '';
}
}
}]
}
ᴅᴇᴍᴏ⧩
log = console.log;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['19:00', '20:00', '21:00', '22:00', '23:00'],
datasets: [{
label: 'LINE',
data: [3, 1, 4, 2, 5],
backgroundColor: 'rgba(0, 119, 290, 0.2)',
borderColor: 'rgba(0, 119, 290, 0.6)'
}]
},
options: {
scales: {
xAxes: [{
ticks: {
callback: function(tick) {
// if tick/value is not equals to '23:00'
// then return the tick/value
// else return an empty string
return tick !== '23:00' ? tick : '';
}
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>