作者:风之云织2004 | 来源:互联网 | 2022-10-27 20:01
我正在使用Chart.js版本2.7.1,并且在输入温度数据时动态更新线形图。
问题在于,这些线永远不会及时通过x轴的中途标记。每次更新时,图表都会自动缩放x轴的右侧(最长时间)以使其更远,因此我的数据永远不会接近图表的右侧。我想要的是使该线接近右侧,并且每次更新时,x轴的未来仅会扩展一小段时间。我该怎么做?谢谢。
这是我配置图表的方式:
var ctx = document.getElementById('tempChart').getContext('2d');
ctx.canvas.width = 320;
ctx.canvas.height = 240;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
legend: {
display: true
},
datasets: [{
fill: false,
data: [],
label: 'Hot Temperature',
backgroundColor: "#FF2D00",
borderColor: "#FF2D00",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
},
{
fill: false,
data: [],
label: 'Cold Temperature',
backgroundColor: "#0027FF",
borderColor: "#0027FF",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
}]
},
options: {
animation: false,
responsive: true,
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time ( UTC )'
},
type: 'time',
time: {
tooltipFormat: "hh:mm:ss",
displayFormats: {
hour: 'MMM D, hh:mm:ss'
}
},
ticks: {
maxRotation: 90,
minRotation: 90
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Temperature ( Celcius )'
},
}]
}
}
});
这是图表: