1

我使用 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 的 generator-angular-fullstack 作为种子。接下来我使用 bower 安装 angular-chart.js (bower install --save angular-chart.js)

索引.html

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

应用程序.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>
4

1 回答 1

1

指令元素应该是 havedata而不是chart-data&labels而不是chart-labels

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

并且数据应该是二维数组

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

Plunkr

于 2015-10-03T13:09:33.817 回答