使用角度圖顯示條形圖中的數據

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

}]);