我正在尝试使用ChartJS来显示来自远程传感器的一些数据。传感器定期(例如,每小时)将数据上传(即推送)到数据库,但有时由于网络问题连接不可用,它们会错过一次轮询。有时由于电源问题,它们可能会错过几天的轮询。
数据存储在具有2个主列的简单表中:
- Unix时间戳(以秒为单位)(传感器单元的时间戳,与轮询数据一起发送)
- 数据值
问题:
- 就数据库服务器而言,它不知道传感器是否错过了轮询(因此不添加“零”值)。
- 当我使用ChartJS绘制数据时,我想将缺少的值绘制为零。
换句话说,我试图显示一个固定的分笔成交点视图,并且只填充有数据的“Y”值。
我摆弄了几个小时都没用
我的代码如下(您可以看到缺少23:00、01:00和08:00-14:00的数据)。我想在图表上将这些值显示为“零”,即使没有对应的“值”。
任何帮助都是感激不尽的。
timestamp =['15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','0:00','2:00','3:00','4:00','5:00','6:00','7:00','14:00',];
target = [17,17,17,17,17,17,17,17,17,17,17,17,17,17,17,17,];
var ctx = document.getElementById('chart').getContext("2d");
var data = {
labels: timestamp,
datasets: [{
data: target,
borderColor: "rgba(255,0,0,1)",
backgroundColor: "rgba(255,0,0,0)",
borderWidth: 1,
spanGaps: false,
tooltips: {
enabled: false
}
}
]
};
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: 0,
max: 300
}
}],
xAxes: [{
type: 'time',
time: {
unit: 'day'
},
ticks: {
count: 24,
stepSize: 1,
autoSkip: false,
}
}]
},
elements: {
point: {
radius: 0,
hitRadius: 5,
hoverRadius: 5
},
line: {
tension: 0
}
},
legend: {
display: false
},
pan: {
enabled: true,
mode: 'xy',
rangeMin: {
x: null,
y: null
},
rangeMax: {
x: null,
y: null
}
},
zoom: {
enabled: true,
drag: true,
mode: 'xy',
rangeMin: {
x: null,
y: null
},
rangeMax: {
x: null,
y: null
}
},
};
var chart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
1条答案
按热度按时间6ioyuze21#
您可以设置
distribution: 'series'