Question

我刚开始使用图表js，目前我正在尝试使用图表js以图表形式显示ng-repeat数据。

以前我用这样的表格形式显示数据。

<table>
<tr>
<th>Name </th>
<th>Season Winners</th>
</tr>
<tr ng-repeat="t in trainer" >
<td>{{t.trainer.trainerName}}</td>
<td>{{t.trainer.seasonWinners}}</td>
</tr>
</table>

现在我正在尝试这个，但我不确定如何使用ng-repeat with charts

  <div ng-repeat = "data" >
    <canvas id="doughnut" class="chart chart-doughnut"
    chart-data="data" chart-labels="labels" height="100px">

    </canvas>
  </div>

最后这是我正在使用的控制器

  angular.module('horseApp.TrainerController',['chart.js']).
  controller('TrainerController', function ($scope, $stateParams, $http) {



    $http.get('restful-services/api/getAllTrainers')
        .success(function (data, status) {
            $scope.trainer = data;

            $scope.labels=[];
            $scope.data=[];

            for(i=0;i<$scope.trainer.length;i++){
                $scope.labels.push($scope.trainer[i].trainerName);
                $scope.data.push($scope.trainer[i].seaonWinners);
            }
              })
        .error(function (error) {
            alert('An error occurred');
        });
           });

感谢任何帮助。感谢

Answer 1

我希望它有所帮助

JS

angular.module('horseApp.TrainerController',['chart.js']).
  controller('TrainerController', function ($scope, $stateParams, $http) {

$scope.config = {
 type: 'doughnut',
 data: {labels: [], datasets: [{data: []}]}
}

$http.get('restful-services/api/getAllTrainers')
    .success(function (data, status) {
        $scope.trainer = data;

        $scope.labels=[];
        $scope.data=[];

        for(i=0;i<$scope.trainer.length;i++){
            $scope.config.data.labels.push($scope.trainer[i].trainerName);
            $scope.config.data.datasets[0].data.push($scope.trainer[i].seaonWinners);
        }
          })
    .error(function (error) {
        alert('An error occurred');
    });
       });

 angular.module('horseApp.TrainerController').
  directive('chartJs', function (){

     return {
         restrict: 'E',
         scope: {
           config: '='
         },
         template: '<canvas width="400" height="400"></canvas>'
         link: function(scope, elem, attr) {

             var ctx = elem.getContext("2d");

             var chart = new Chart(ctx, scope.config);

         }
     }

  })

HTML

<div>
   <chart-js data-config="config"></chart-js>
</div>

Answer 2

此问题与chart-type有关，类名不能为chart-pie或chart-bar，应为chart-base，您还要在元素中指定chart-type像这样的属性：

<div ng-repeat="(name,options) in charts">
   <canvas id="{{options.name}}" class="chart chart-base" chart-type="options.type" chart-data="options.data" chart-labels="options.labels">
   </canvas>
</div>

带有ng-repeat的图表js

2 个答案: