如何将数据从 Firebase 检索到 Google 图表？答案

【问题标题】：How to retrieve data from firebase to Google chart?如何将数据从 Firebase 检索到 Google 图表？
【发布时间】：2022-02-06 23:33:32
【问题描述】：

抱歉，这是我使用 Firebase 的第一个项目。我在我的项目中尝试了这个解决方案，但无济于事（来自堆栈溢出的另一个帖子）。该数据库的数据来自 ESP8266。我的 Firebase 如下所示：

"MOIST" : {
    "-MvDCD_qVJUZtZ9Pe98p" : {
      "data" : "2022-2-6",
      "time" : "09:44:40",
      "value" : 5
    },
    "-MvDCE56y_4aXngGtQJx" : {
      "data" : "2022-2-6",
      "time" : "09:44:42",
      "value" : 5
    },

这是我正在使用的代码：

 <html>
 <head> 
     
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.7.8/firebase.js"></script>
    <script src=" http://www.google.com/uds/modules/gviz/gviz-api.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        // Initialize Firebase
        var config = {
            apiKey: "AIzaSyD0y-idPsXKkqOI8333yQE9NTTvF5cDh0M",
            authDomain: "podlewanie-2.firebaseapp.com",
            databaseURL: "https://podlewanie-2-default-rtdb.europe-west1.firebasedatabase.app",
            projectId: "podlewanie-2",
            storageBucket: "podlewanie-2.appspot.com",
            messagingSenderId: "266746962201",
            appId: "1:266746962201:web:1a4c60a5824162c560a588",
            measurementId: "G-7QW1Z2DD7W"
        };
        firebase.initializeApp(config);

        var database = firebase.database();


        firebase.database().ref('/MOIST').once('value').then(function(snapshot) {
            temps = snapshot.val();
            console.log(temps);

            google.charts.load('current', {
                'packages': ['corechart', 'line']
            });
            google.charts.setOnLoadCallback(drawChart(temps));
        });

        function parse(temp) {
            return (new Date(temp.replace(/-/g, '/'))).getTime()
        }



        function drawChart(temps) {
            var array = $.map(temps, function(value, index) {
                return [value];
            });

            var data = new google.visualization.DataTable();
            data.addColumn('number', 'date');
            data.addColumn('number', 'time');
            data.addColumn('number', 'value');

            var sort = function(a, b) {
                return parse(a.time) - parse(b.time)
            };
            var tempData = array.sort(sort);
            var output = [];

            for (var i = 0; i < tempData.length; i++) {
                var item = tempData[i];
                output.push([
                    //  parseFloat(parse(item.time)),
                    parseFloat(item.time),
                    parseFloat(item.date),
                    parseFloat(item.value)
                ]);
            }
            console.log(output);
            data.addRows(output);


            var options = {
                chart: {
                    title: 'title',
                    subtitle: 'subtitle'
                },
                width: 900,
                height: 500
            };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            console.log("data + options: " + data, options)
            chart.draw(data, options);
        }



        google.charts.load('current', {
            'packages': ['corechart', 'line']
        });
        google.charts.setOnLoadCallback(drawChart);
    </script>
</head>
      <body>
        <div id="curve_chart" style="width: 900px; height: 500px"></div>
      </body>
</html>

运行此代码后，我只看到白页。我会很感激你的帮助。

【问题讨论】：

标签： firebase-realtime-database google-visualization

【解决方案1】：

当您看到白屏时，检查浏览器的控制台 (Ctrl+Shift+J/⌘ +⌥+J 在大多数浏览器中，或 F12 在 LegacyEdge/IE 中）用于错误。在这种情况下，您会收到以下错误：

未捕获的错误：FIREBASE 致命错误：无法解析 Firebase 网址。请使用 https://.firebaseio.com

这表明您使用的 Firebase SDK 版本不理解您在配置中为 databaseURL 提供的值：

var config = {
  /* ... */
  databaseURL: "https://podlewanie-2-default-rtdb.europe-west1.firebasedatabase.app"
  /* ... */
}

因为这可能是直接从 Firebase 控制台复制的，所以问问自己为什么 SDK 不理解这个 URL？答案是因为您使用的是 Firebase SDK v3.7.8（自 2017 年 4 月起）。

<script src="https://www.gstatic.com/firebasejs/3.7.8/firebase.js"></script>

您应该使用最新版本，以确保您是最新的任何安全修复程序、更正的缺陷、更新的服务器 API 或新产品更新。

最新的旧版 SDK（截至撰写本文时）为 8.10.1（2022 年 1 月）：

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase.js"></script>

但是，对于所有新项目，您应该按照upgrade guide 使用新的模块化 SDK。该 SDK 的最新版本是 9.6.6（2022 年 2 月）。

其他问题

除此之外，你还需要更正这一行，应该是设置回调函数：

google.charts.setOnLoadCallback(drawChart(temps));

到以下：

google.charts.setOnLoadCallback(() => drawChart(temps));

此外，在该 drawChart 函数中，您还定位了 ID 为 chart_div 的元素，而不是该行上正确的 curve_chart：

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

那一行应该是：

var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

【讨论】：

非常感谢！ SDK版本的提示是正确的。现在图表正在工作。
这没问题google.charts.setOnLoadCallback(() => drawChart(temps));，但这段代码var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 会出错。