根據firebase數據在html上顯示canvas報錯

Question

很確定我在做正確的事情，但是基於實時數據庫值顯示的圖表並沒有顯示出來。 我的實時數據庫和演示的第一張圖像如 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>

Answer 1

根據分享的截圖，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>