时间戳

首页 > 解决方案 > 如何将 Firebase 数据实时绘制到 ChartJS

javascript - 如何将 Firebase 数据实时绘制到 ChartJS

问题描述

我在从 firebase 数据中绘制 chartjs 数据时遇到问题。我与我的数据库有连接，但我无法在图表上绘制任何内容。我希望在数据库中出现新数据时自动刷新图表。到目前为止，我正在尝试一个简单的条形图。

谁能给我一个解决方案？

Firebase 节点： Firebase 节点：

JS：

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Value',],
        datasets: [{
            label: 'Temperature',
            data: [0],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
    });

 function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
    }

function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

var config = {
    apiKey: "xxx",
    authDomain: "xxx",
    databaseURL: "xxx",
    projectId: "xxx",
    storageBucket: "xxx",
    messagingSenderId: "xxx",
    appId: "xxx",
    measurementId: "xxx"
};

firebase.initializeApp(config);

var valueRef = firebase.database().ref('temps');
valueRef.on('value', function (snapshot) {
    removeData(myChart);
    addData(myChart, "1", snapshot.val());
});

编辑：我找到了解决方案。而不是 'values' ，如果一个新的孩子被'child_added'添加到相关节点中就足够了。

var valueRef = firebase.database().ref('temps');
valueRef.on('child_added', (snapshot) => {
    var temperature = snapshot.val().temp;
    var time = snapshot.val().time
    addData(myChart, time, temperature);
});

结果，我得到了一张温度随时间变化的图表。

标签： javascriptfirebasefirebase-realtime-databasechart.js

解决方案

您应该使用onSnapshot方法订阅更改：

db.collection("your collection")
     //.where("field", "==", "value")    <--   you can use condition
     //.doc("some document")             <--   or one document
     .onSnapshot(function(snapshot) {
        snapshot.docChanges().forEach(function(change) { 
            if (change.type === "added") {
                console.log("New item: ", change.doc.data());
            }
            if (change.type === "modified") {
                console.log("Modified item: ", change.doc.data());
            }
            if (change.type === "removed") {
                console.log("Removed item: ", change.doc.data());
            }
        });
    });

在文档中查看更多示例

推荐阅读