generator-angular-fullstack和angular-chart.js不显示图表-Java 学习之路

我一直在使用角度一段时间，但这是我第一次尝试使用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的发电机 - 角 - 全堆栈作为种子 . 接下来我用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>

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

回复于 2024-05-09T06:52:07+08:00

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

1 回答

相关问题