角度动态图表生成

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

数据集中的My options对象，如

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

在使用ng-repeat指令查看时

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

完整的代码：

Angular Chart.js issue

结果：

​

​