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

我的数据集中的选项对象如

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

codepen中的完整代码：

Angular Chart.js issue

结果：

角动态图生成

1 个答案: