我熟悉SQL,最近通过一些在线教程开始研究Firebase,angularJS和chart.js。进入NoSQL数据库比我想象的更困难,因为我的思维仍然停留在SQL的思维方式中。
我想要实现的是“状态”字段中每个值的记录计数,并将每个状态的计数返回到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的count来填充$ 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);
};
}]);
答案 0 :(得分: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;
...
};
});