angularjs - 使用角度图在条形图中显示数据

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

}]);