我在Chart.js中有一个图表来显示过去2小时的外部温度,但是只要范围非常大,图表就会被截断并在顶部剪辑,我尝试了很多方法尝试修复它但它不起作用。我可以添加一个选项来帮助它相应地扩展到最大值吗?任何帮助,将不胜感激。感谢。
JavaScript(代码段):
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Outdoor Temperature',
backgroundColor: graphBgColor,
borderColor: graphBorderColor,
data: tempdata,
}]
},
options: {
scaleLabel: " <%= Number(value / 1000) + ' MB'%>"
}
});
答案 0 :(得分:1)
要解决此问题,您需要根据tempdata
数组设置y轴刻度的最大值,如下所示:
options: {
scales: {
yAxes: [{
ticks: {
max: Math.max.apply(null, tempdata) + 1, //max value + 1
}
}]
},
...
}
ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇ
var labels = ['Jan', 'Feb', 'Mar', 'Apr'];
var tempdata = [2, 4, 1, 3];
var graphBgColor = 'rgba(0, 119, 204, 0.1)';
var graphBorderColor = 'rgba(0, 119, 204, 0.5)';
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Outdoor Temperature',
backgroundColor: graphBgColor,
borderColor: graphBorderColor,
data: tempdata,
}]
},
options: {
scales: {
yAxes: [{
ticks: {
max: Math.max.apply(null, tempdata) + 1, //max value + 1
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>