角度ダイナミックグラフ生成

Question

私はChart JsとAngular Chart Directiveを使用しています。私は、ng-repeat指令で棒グラフを動的に必要とします。 https://jtblin.github.io/angular-chart.js/

その文書によると、私は、グラフラベルとデータ配列を生成するために、私のコントローラに二つの機能を作った二つの配列

$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; 
    $scope.data = [ 
    [65, 59, 80, 81, 56, 55, 40] 
    ]; 

を与える必要があります。

$scope.makeChartLbl=function(data) 
    { 
     console.log(data); 
     var arr=[]; 
     for(var d in data) 
     { 
      arr.push(d.name) 
     } 

     // console.log(arr); 
     return arr; 
    } 

    $scope.makeChartData=function(data) 
    { 
     console.log(data); 
     var arr=[]; 
     for(var d in data) 
     { 
      arr.push(d.total_vote) 
     } 

     // console.log(arr); 
     return arr; 
    } 

私のオプションはNGリピートディレクティブ

<canvas id="bar" class="chart chart-bar" 
     chart-data="makeChartData(options)" chart-labels="makeChartLbl(options)"> 
    </canvas> 

との見解では

{ 
     "options": [ 
       { 
        "id": 1, 
        "pool_id": 1, 
        "name": "pool1 option1", 
        "total_vote": 1 
       }, 
       { 
        "id": 2, 
        "pool_id": 1, 
        "name": "pool1 option2", 
        "total_vote": 0 
       }, 
       ... 
       ... 
      ] 
    } 

としてのようなデータセット内のオブジェクトが、それはチャートを生成していません。どのようにしてこの問題を解決できますか？

Answer 1

複数の問題があります。 オブジェクトを正しく読み込んでいるかどうかわからないので、実装のコードを確認してください。もう1つの問題は、Angularが関数内に新しい配列を作成する方法のために$rootScope:infdigエラーを起こしてしまったということですが、それも修正しましたが、特定のケースで修正する必要があるかもしれません。

var chartData = []; 
var chartLabels = []; 

$scope.options = options; 

$scope.makeChartLbl = function(data) { 
chartData.length = 0; 
     data.forEach(function(datum) { 
     chartData.push(datum.name); 
     }); 
return chartData; 
} 

$scope.makeChartData = function(data) { 
chartLabels.length = 0; 
     data.forEach(function(datum) { 
     chartLabels.push(datum.total_vote); 
     }); 
return chartLabels; 
} 

}]); 


var options = [ 
      { 
       "id": 1, 
       "pool_id": 1, 
       "name": "pool1 option1", 
       "total_vote": 1 
      }, 
      { 
       "id": 2, 
       "pool_id": 1, 
       "name": "pool1 option2", 
       "total_vote": 0 
      } 
     ]; 

全コードcodepen中：

Angular Chart.js issue

結果：

これは、1つの解決策です