0

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

}]);

チャートの現在の外観

ここに画像の説明を入力

どんな助けでも大歓迎です。ありがとうございました...

4

1 に答える 1

0

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

}]);
于 2015-04-12T16:56:22.097 に答える