Angular 图表未呈现，但开发工具显示没有错误

Question

我正在使用 Angular 和 Material 设计。当我添加 Angular 图表时，它不会在页面上呈现，但 chrome 的开发工具没有显示任何错误。我做错了什么？

我已经为此设置了一个 plunker HERE

要了解我的代码，请参阅下面的代码片段

 <div role="tabpanel"
               id="tab1-content"
               aria-labelledby="tab1"
               ng-switch-when="0"
               md-swipe-left="next()"
               md-swipe-right="previous()"
               layout="row" layout-align="center center">
              <md-card flex-gt-sm="90" flex-gt-md="80">
                <md-card-content>
                  <h2>Profile / Utilization</h2>

                  <canvas id="doughnut" class="chart chart-doughnut" data="data"
                    labels="labels"></canvas> 

                  <md-list>


                  </md-list>
                </md-card-content>
              </md-card>
          </div>

index.js

 var app = angular.module('StarterApp', ['ngMaterial', 'ngMdIcons','chart.js']);

 app.controller("DoughnutCtrl", function ($scope) {
 $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];      
 $scope.data = [300, 500, 100];});

Answer 1

我认为您需要为图表指定控制器。所以

<md-card-content ng-controller="DoughnutCtrl">

就目前而言，您的代码上下文绑定到 AppCtrl，其中不包含图表数据。

Answer 2

因为您没有将 "DoughnutController" 绑定到您的视图..

我将此块移动到 "AppCtrl" 并且它有效..

$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
$scope.data = [300, 500, 100];

http://plnkr.co/edit/zkXYb5sHmwRUQQPmsdbq?p=preview

（我也去掉了你的 3 个 <head> 标签和 3 个 <body> 标签）

Angular 图表未呈现，但开发工具显示没有错误

Angular Chart not rendering but dev tools says no errors

charts

angularjs

angular-material

angular-chart