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

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

本文关键字：显示图 js angular-chart Generator-angular-fullstack      更新时间：2023-09-26

我已经使用angular有一段时间了，但这是我第一次尝试使用yeoman和generator-angular-fullstack。我试图使用angular-chart.js在视图中显示图表。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)

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>

指令元素应该是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

相关文章：