如何使用Firebase数据制作一个简单的d3图表

How do I make a simple d3 chart with Firebase data?

本文关键字：一个 简单 图表 d3 Firebase 何使用 数据      更新时间：2023-09-26

我试图查询firebase中录制了多少首特定歌曲。换句话说，我试图得到歌曲的总播放次数，并将其绘制在图表上。

我试图得到firebase数组的长度，但我知道我必须使用$loaded.then（function（））。我该如何在这里使用它？我的控制器：

(function () {
function MetricsCtrl($scope,$firebaseArray, Metric) {
    var firebaseRef = new Firebase("https://bloc-jams.firebaseio.com/");
    $scope.options = {...};
    var blue = $firebaseArray(firebaseRef.child('Songs').orderByChild('name').equalTo("Blue"))
    var green = $firebaseArray(firebaseRef.child('Songs').orderByChild('name').equalTo("Green"))
    var red = $firebaseArray(firebaseRef.child('Songs').orderByChild('name').equalTo("Red"))
    var pink = $firebaseArray(firebaseRef.child('Songs').orderByChild('name').equalTo("Pink"))
    var magenta = $firebaseArray(firebaseRef.child('Songs').orderByChild('name').equalTo("Magenta"))
    $scope.data = [
        {
            values: [
                {
                    "label" : "Blue" ,
                    "value" :  blue.length
                } ,
                {
                    "label" : "Green" ,
                    "value" : green.length
                } ,
                {
                    "label" : "Red" ,
                    "value" : red.length
                } ,
                {
                    "label" : "Pink" ,
                    "value" : pink.length
                } ,
                {
                    "label" : "Magenta" ,
                    "value" : magenta.length
                }
            ]
        }
    ]
}
angular
    .module('blocJams')
    .controller('MetricsCtrl', ['$scope','$firebaseArray','Metric', MetricsCtrl]);
})();

您的推理是正确的，只有在加载firebase数组后才能制作图表。

如果你正在使用angular的承诺服务$q:

$q.all([ blue.$loaded(), 
         green.$loaded(), 
         red.$loaded(), 
         pink.$loaded(), 
         magenta.$loaded()
]).then(makeChart)
function makeChart(data) {
  // data[0] is blue, data[1] is green, etc.
  // ...
  // $scope.data = [{...}]
}
相关文章：