角度动态图表生成答案

【问题标题】：Angular Dynamic Chart Generate角度动态图表生成
【发布时间】：2016-11-12 03:49:21
【问题描述】：

我正在使用 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;
    }

我在数据集中的选项对象，如 as

    { 
      "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>

但它没有生成图表。如何解决这个问题？

【问题讨论】：

标签： angularjs chart.js angular-chart

【解决方案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

结果：

【讨论】：