我使用的是Chart.js2.7.1版,当温度数据输入时,我会动态更新折线图。
问题是这些线从来没有及时通过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 )'
},
}]
}
}
});
下面是图表:
1条答案
按热度按时间hsvhsicv1#
正如您在下面的代码片段中所看到的,也要感谢Daniel W Strimpel创建了初始代码片段,您的问题在于hot和cold temperature
data
。这两个数组的条目数都是
n
,最后缺少y
坐标(包括temperature值)。我通过删除最后5个低温和高温data
条目的y
来重新创建您的场景。chart
会将日期添加到x axis
,但不会添加temperature
值,因此该行不会显示。该代码片段将重新创建您的场景,您可以运行该代码片段以了解问题,并通过将
y
值添加到getHotTempData
和getColdTempData
第一次