javascript - Generator-Angular-FullStack 和 Angular-Chart.js 不显示图表

Question

我已经使用 Angular 一段时间了，但这是我第一次尝试使用 yeoman 和 Generator-Angular-FullStack。我正在尝试使用 angular-chart.js 在 View 中显示图表。 poll.html 加载没有问题，并正确显示所有内容，只有图表未显示。 Devtools 在所有文档上显示状态 200，我可以看到 Chart.js、Angular-Chart.js 和 Angular-Chart.CSS 都以正确的顺序加载。我尝试使用示例数据来查看是否存在某种计时问题，但示例数据也不起作用。下面我列出了所采取的步骤以及代码片段。完整来源:https://github.com/MichaelLeeHobbs/freeTheVote

提前致谢!

我使用 Daftmonk 的生成器 Angular 全栈作为种子。接下来我使用 Bower 安装 angular-chart.js (bower install --save angular-chart.js)

index.html

  <script src="bower_components/Chart.js/Chart.js"></script>
  <script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>

app.js

angular.module('freeTheVoteApp', [
 'ngCookies',
 'ngResource',
 'ngSanitize',
 'ngRoute',
 'ui.bootstrap',
 'validation.match',
 'chart.js'
])

poll.controller.js

angular.module('freeTheVoteApp')
.controller('PollCtrl', function ($scope, $http) {
   var self = this;
   this.polls = [];

   $http.get('/api/polls').then(function(response) {
     self.polls = response.data;
   });

   $scope.options = ['a', 'b', 'c'];
   $scope.votes = ['3', '5', '13'];
});

民意调查.html

<navbar></navbar>
<!--
  ownerId: Number,
  name: String,
  options: [String],
  votes: [Number],
  active: Boolean
-->
<div class="mainContent container">
  <div class="row">
    <div class="col-lg-12">
      <div class="col-md-4 col-lg-4 col-sm-6" ng-repeat="aPoll in poll.polls">
        <h3>{{aPoll.name}}</h3>
        <ol>
          <li ng-repeat="options in aPoll.options">{{options}}
            <span> votes: {{aPoll.votes[$index]}}</span>
          </li>
        </ol>
        <canvas id="{{'doughnutChart' + $index}}" class="chart chart-doughtnut" chart-data="votes" chart-labels="options"></canvas>
      </div>
    </div>
  </div>
</div>
<footer></footer>

Answer 1

指令元素应该有data而不是chart-data和labels而不是chart-labels

<canvas id="{{'doughnutChart' + $index}}" 
  class="chart chart-doughtnut" 
  data="votes" 
  labels="options">
</canvas>

数据应该是二维数组

$scope.options = [['a', 'b', 'c']];

Plunkr