角度動態圖表生成

Question

我正在使用Chart Js和Angular Chart指令。我需要在我的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; 
    } 

我的選擇在數據集中對象等作爲

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

考慮到與NG-重複指令

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

但它不產生圖表。如何解決這個問題？

Answer 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

結果：