使用角度图显示条形图中的数据

Question

我正在尝试使用angular-chart在条形图上显示数据。我正在尝试从数据库中检索数据。我希望显示包括今年在内的过去五（5）年的图表上的所有数据，并且还要获取与年份相符的数据。到目前为止，我只用了2年，如下所示。

JSON数组

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 
      ] 
     ]; 
     } 
    }; 
    }); 

}]); 

图目前看

任何帮助将不胜感激。谢谢...

Answer 1

我想简单地创建自定义过滤器，以显示最近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 
       ] 
      ]; 
     } 
    }); 

}]);