使用 AngularJS 从 Firebase 查询 Chart.js 的数据

Question

我熟悉 SQL，并且最近通过学习一些在线教程开始研究 Firebase、angularJS 和 chart.js。事实证明，进入 NoSQL 数据库比我想象的要困难得多，因为我的思想仍然停留在 SQL 的思维方式上。

我想要实现的是 'status' 字段中每个值的记录计数和 return 每个状态对 Chart.js 折线图的计数。

我可以让图表按照标准 Chart.js 演示使用硬编码数组。我正在努力的是用每个状态的计数替换数组。

我有以下 index.html:

    <!DOCTYPE html>

<html lang="en" ng-app="myApp" class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>A question on chart.js</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
  <link rel="stylesheet" href="app.css">
  <link rel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css" />
  <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body class="bodyBackground">

        <div ng-view></div>

  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
  <script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
  <script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
  <script src="app.js"></script>
  <script src="chart/chart.js"></script>
  <script src="components/version/version.js"></script>
  <script src="components/version/version-directive.js"></script>
  <script src="components/version/interpolate-filter.js"></script>
  <script src="spin.min.js"></script>
  <script src="ladda.js"></script>
  <script src="https://code.jquery.com/jquery-2.0.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="bower_components/angular/angular.min.js"></script>
  <script src="bower_components/Chart.js/Chart.min.js"></script>
  <script src="bower_components/angular-chart.js/dist/angular-chart.min.js"></script>
</body>
</html>

我的图表有以下图表模块和控制器文件（取自 chart.js 演示）

'use strict';

angular.module('myApp.chart', ['ngRoute', 'firebase', 'chart.js'])

.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/chart', {
        templateUrl: 'chart/chart.html',
        controller: 'LineCtrl'
    });
}])

.controller("LineCtrl", ['$scope', '$firebase', function ($scope, $firebase ) {

    $scope.labels = ['Referred', 'Contacted', 'Appointment booked', 'Appointment complete', 'Application made', 'Offer', 'Completion']
    $scope.series = ['Series A'];
    $scope.data =[
       [28, 48, 40, 19, 86, 27, 90]
    ];
    $scope.onClick = function (points, evt) {
        console.log(points, evt);
    };


}]);

以下html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Chart</title>
    <script src="bower_components/Chart.js/Chart.min.js"></script>
    <script src="bower_components/angular-chart.js/dist/angular-chart.min.js"></script>


</head>
<body>
    <div class="container">
        <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels"
                chart-legend="true" chart-series="series" chart-click="onClick"></canvas>        
    </div>

</body>
</html>

具有以下数据结构：

{
  "Names" : {
    "-JyMmPf0jxwMnmJWp4Rx" : {
      "contactNumber" : "vcmsdlkms",
      "firstName" : "skvm",
      "notes" : "dsfmk",
      "status" : {
        "Id" : 3,
        "Status" : "Appointment booked"
      },
      "surname" : "kdvmskdl",
      "title" : "Mrq"
    },
    "-JyN13hPqlgQYSFGz88g" : {
      "contactNumber" : "052156165",
      "firstName" : "J",
      "notes" : "5651546",
      "status" : {
        "Id" : 2,
        "Status" : "Contacted"
      },
      "surname" : "Smith",
      "title" : "Miss"
    },
    "-JyN1Bc1ncbn15zCaJK8" : {
      "contactNumber" : "651198197",
      "firstName" : "A",
      "notes" : "11111111171",
      "status" : {
        "Id" : 1,
        "Status" : "Referred"
      },
      "surname" : "Johns",
      "title" : "Dr"
    },
    "-JyN1HHfULi7QKIAKFim" : {
      "contactNumber" : "91781818181",
      "firstName" : "A",
      "notes" : "adfaf",
      "status" : {
        "Id" : 6,
        "Status" : "Offer"
      },
      "surname" : "Green",
      "title" : "Rev"
    },
    "-JyN1O2aSrtTYFBnOJqJ" : {
      "contactNumber" : "9797",
      "firstName" : "Stan",
      "notes" : "0908",
      "status" : {
        "Id" : 3,
        "Status" : "Appointment booked"
      },
      "surname" : "Matthews",
      "title" : "Mr"
    },
    "-JyN1USlPVtCCAWt6acA" : {
      "contactNumber" : "0154184",
      "firstName" : "John",
      "notes" : "15115",
      "status" : {
        "Id" : 7,
        "Status" : "Completion"
      },
      "surname" : "Barnes",
      "title" : "Mr"
    },
    "-JyN1am3gjpN7F7k8Vz7" : {
      "contactNumber" : "561659981",
      "firstName" : "M",
      "notes" : "6151656",
      "status" : {
        "Id" : 1,
        "Status" : "Referred"
      },
      "surname" : "Bates",
      "title" : "Master"
    },
    "-JyN1hF-SSjr_9_VlGlJ" : {
      "contactNumber" : "0224242",
      "firstName" : "Nona",
      "notes" : "n kn kj",
      "status" : {
        "Id" : 1,
        "Status" : "Referred"
      },
      "surname" : "Paul",
      "title" : "Mrs"
    }
  },

我尝试使用 AngularFire 网站上的食谱过滤列表 http://jsfiddle.net/firebase/ku8uL0pr/

但我想我可能找错了树。简而言之，我想知道如何使用与每条记录关联的每个 status.name 的计数来填充 $scope.data 数组。任何关于我应该如何处理这个问题的指示都将不胜感激。

我根据第一个答案中的评论更新了控制器：

.controller("LineCtrl", ['$scope', '$firebase', function ($scope, $firebase) {
    var ref = new Firebase('My-firebase-url');
    var list = $firebase( ref.orderByChild('Status').limitToFirst(20) );
    var Status = {};
    var Results = $firebase;
    Results.$loaded().then(function() {    // Wait for Promise from Firebase
        angular.forEach(Results, function(ResultInfo) {
            Status[ResultInfo.Status] += 1;     // Increment Each Status as it is found
        });
    });
    $scope.data = Status;
    $scope.labels = ['Referred', 'Contacted', 'Appointment booked', 'Appointment complete', 'Application made', 'Offer', 'Completion']
    $scope.series = ['Series A'];

    $scope.onClick = function (points, evt) {
        console.log(points, evt);
    };


}]);

Answer 1

在我的控制器中，我处理响应以创建图表数组。

angular.module('MyApp').controller("Ctrl", ["$scope", "FactoryGettingDataFromFirebase",
    function($scope, FactoryGettingDataFromFirebase) {

    var Status = {};
    var Results = FactoryGettingDataFromFirebase;
    Results.$loaded().then(function() {    // Wait for Promise from Firebase
        angular.forEach(Results, function(ResultInfo) {
                Status[ResultInfo.Status] += 1;     // Increment Each Status as it is found
            });
        });
    }
    $scope.StatusCounts = Status;
]);

您还可以让工厂首先使用您的所有值清除和初始化状态数据，使它们计数为 0。

angular.module('MyApp').factory("ClearStatus", function() {
    return function(StatusArray) {
        StatusArray['Referred'] = 0;
        StatusArray['Completion'] = 0;
        ...
   };
});

使用 AngularJS 从 Firebase 查询 Chart.js 的数据

Querying data from Firebase for Chart.js using AngularJS

angularjs

firebase

chart.js