Angularjs 带ng重复的图表js

我刚刚开始使用ChartJS，目前我正在尝试使用ChartJS以图表形式显示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>

名称
季军
{{t.trainer.trainerName}
{{t.trainer.SeasonalWinners}

现在我正在尝试这个，但我不确定如何使用ng repeat与图表

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

angular.module（'horseApp.TrainerController'，['chart.js']）。
控制器（'TrainerController'，函数（$scope、$stateParams、$http）{
$http.get（'restful-services/api/getAllTrainers'）
.成功（功能（数据、状态）{
$scope.trainer=数据；
$scope.labels=[]；
$scope.data=[]；
对于（i=0；i我希望它有帮助

JS

angular.module（'horseApp.TrainerController'，['chart.js']）。
控制器（'TrainerController'，函数（$scope、$stateParams、$http）{
$scope.config={
键入：“甜甜圈”，
数据：{labels:[]，数据集：[{data:[]}]}
}
$http.get（'restful-services/api/getAllTrainers'）
.成功（功能（数据、状态）{
$scope.trainer=数据；
$scope.labels=[]；
$scope.data=[]；
对于（i=0；i问题与
图表类型
相关，类名不能是
图表饼图
或
图表栏
，它应该是
图表库
，并且您可以在元素属性中另外指定
图表类型
，如下所示：

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


谢谢你的帮助。当我尝试时，它以“收藏中的物品”[track by\u id]的形式给了我这个errorExpected表达式'但是得到了'config'。哦，我的错。我更新了我的答案，看，你实际上不应该使用
ng repeat
，所以我为
做了一个指令，所以你传入
scope.config
，创建图表js实例。我把图表js指令放在ng repeat中，但我无法让它工作。出于某种原因，它呈现为0px宽0px高。一个y提示我做错了什么？我甚至从chart.js文档中复制了数据，并将其传递到指令中，以测试我的数据格式是否正确。但它仍然不起作用。
<div>
   <chart-js data-config="config"></chart-js>
</div>

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