generator-angular-fullstack 和 angular-chart.js 不显示图表

Question

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

提前致谢！

我使用 Daftmonk 的生成器-angular-fullstack 作为种子。接下来我使用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'];
});

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

generator-angular-fullstack 和 angular-chart.js 不显示图表

generator-angular-fullstack and angular-chart.js not displaying charts

javascript

angularjs

chart.js

angular-fullstack

angular-chart