很确定我做的是正确的,但是基于实时数据库值的图表显示没有显示出来。我的实时数据库和演示的第一张图片如 img 2 和 img 3 所示。基本上数据被捕获,但它没有出现在 img 2 上。
https://imgur.com/0Lfei6p
https://imgur.com/piCJhRl
https://imgur.com/kCJIYAR
<script>
window.onload = function () {
var dps = []; // dataPoints
var chart = new CanvasJS.Chart("chartContainer", {
title :{
text: "Dynamic Data"
},
data: [{
type: "line",
dataPoints: dps
}]
});
var xVal = 0;
var yVal = 0;
var updateInterval = 1000;
var dataLength = 20;
var updateChart = function (count) {
count = count || 1;
for (var j = 0; j < count; j++) {
firebase.database().ref('users/00/0010').on('value', function(snap)
{
yVal=snap.val().a;
});
dps.push({
x: xVal,
y: yVal
});
xVal+=1;
}
if (dps.length > dataLength) {
dps.shift();
}
chart.render();
};
updateChart(dataLength);
setInterval(function(){updateChart()}, updateInterval);
}
</script>
最佳答案
根据分享的截图,ultra1 有一个字符串值。 CanvasJS y 值只能是数字。在这种情况下,将 ultra1 转换为数字,同时将其传递给 y 值应该可以正常工作。下面是一个例子。
var jsonData = [{"led":"-1","sound":"", "time":"1","ultra1":"529.0", "ultra2":" ", "wastageType":"pee-clear"}];
var dataPoints = [];
for (var i = 0; i <= jsonData.length - 1; i++) {
dataPoints.push({y: Number(jsonData[i].ultra1) }); //Convert String to Number
}
var chart = new CanvasJS.Chart("chartContainer", {
data: [{
dataPoints: dataPoints
}]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 180px; width: 100%;"></div>
关于javascript - 基于 firebase 数据在 html 上显示 Canvas 时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65091319/