[英]Display data in bar chart using angular-chart
我正在尝试使用angular-chart在条形图上显示数据。 我正在尝试从数据库中检索数据。 我想在图表上显示过去五(5)年(包括今年)中的所有数据,并获取与年份相对应的数据。 到目前为止,我仅使用2年,如下所示。
杰森阵列
AngularJS
app.controller('ChartCtrl', ['$scope', '$http', function ($scope, $http) {
var currentYear = new Date().getFullYear();
var allYrs = [];
// get data from database
$http.get('/dashboard/incident').success(function(incidents) {
$scope.incidentCnt = incidents;
console.log($scope.incidentCnt);
for (var i = 0; $scope.incidentCnt.length; i++) {
// Gets the current year and last 4 years (5 yrs total)
for(var year = currentYear; year >= currentYear-4; year--) {
allYrs.push(year);
$scope.labels = allYrs; // display years
$scope.series = [
'Aggravated Assault',
'Arson',
'Burglary',
'Forcible Sex Offense',
'Hate Crime',
'Motor Vehicle Theft',
'Murder or Non-Negligent Manslaughter',
'Negligent Manslaughter',
'Non-Forcible Sex Offense',
'Relationship/Dating Violence',
'Robbery',
'Stalking'
];
$scope.data = [
[
$scope.incidentCnt[i].assault,
$scope.incidentCnt[i].arson,
$scope.incidentCnt[i].burglary,
$scope.incidentCnt[i].fSexOffense,
$scope.incidentCnt[i].hateCrime,
$scope.incidentCnt[i].vehicleTheft,
$scope.incidentCnt[i].nonNegligentMaslaughter,
$scope.incidentCnt[i].negligentMaslaughter,
$scope.incidentCnt[i].nonForcibleSexOffense,
$scope.incidentCnt[i].rshipDatingViolence,
$scope.incidentCnt[i].robbery,
$scope.incidentCnt[i].stalking
]
];
}
};
});
}]);
图表的当前外观
任何帮助将非常感激。 谢谢...
我只需创建一个自定义过滤器即可显示最近5年的数据
过滤
app.filter('for5Years', function(){
return function(values){
var returnValues = [],
date = new Date(),
currentYear = date.getFullYear(),
limitYear = currentYear - 4;
angular.forEach(values, function(value, index){
if(value.incidentyear <= currentYear && value.incidentyear >= limitYear){
returnValues.push(value);
}
});
return returnValues;
}
});
控制者
app.controller('ChartCtrl', ['$scope', '$http', '$filter', function($scope, $http, $filter) {
var currentYear = new Date().getFullYear();
var allYrs = [];
// get data from database
$http.get('/dashboard/incident').success(function(incidents) {
$scope.incidentCnt = $filter('for5Years')(incidents); //this line will do filtering for you.
console.log($scope.incidentCnt);
//$scope.labels = allYrs; // display years logic to do
for (var i = 0; $scope.incidentCnt.length; i++) {
$scope.series = [
'Aggravated Assault',
'Arson',
'Burglary',
'Forcible Sex Offense',
'Hate Crime',
'Motor Vehicle Theft',
'Murder or Non-Negligent Manslaughter',
'Negligent Manslaughter',
'Non-Forcible Sex Offense',
'Relationship/Dating Violence',
'Robbery',
'Stalking'
];
$scope.data = [
[
$scope.incidentCnt[i].assault,
$scope.incidentCnt[i].arson,
$scope.incidentCnt[i].burglary,
$scope.incidentCnt[i].fSexOffense,
$scope.incidentCnt[i].hateCrime,
$scope.incidentCnt[i].vehicleTheft,
$scope.incidentCnt[i].nonNegligentMaslaughter,
$scope.incidentCnt[i].negligentMaslaughter,
$scope.incidentCnt[i].nonForcibleSexOffense,
$scope.incidentCnt[i].rshipDatingViolence,
$scope.incidentCnt[i].robbery,
$scope.incidentCnt[i].stalking
]
];
}
});
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.