angular-chart.js圖表​​不顯示在離子應用程序上

Question

我在離子應用程序中使用了角度圖表，但圖表似乎無法呈現。

這裏是標記代碼：

<ion-view title="Home" hide-nav-bar="false" ng-controller="checkUserInfoCtrl"> 
<ion-content padding="true"> 
    <ion-item > 
    <canvas id="doughnut" 
     class="chart chart-doughnut" 
     chart-data="data" 
     chart-labels="labels"> 
    </canvas> 
    </ion-item> 
</ion-content> 
</ion-view> 

這裏是控制器代碼：

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

上我會錯在何處什麼想法？

Answer 1

(function(angular) { 
    'use strict'; 
angular.module('myApp', ['ionic','chart.js']) 
    .controller('myController', [function() { 
     var ctrl = this; 
     ctrl.socialChart = { 
      options: { 
       legend: { 
        display: true 
       } 
      }, 
      labels: ["Download Sales", "In-Store Sales", "Mail-Order Sales"], 
      colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'], 
      data: [300, 500, 100] 
     }; 

    }]); 

})(window.angular); 

DEMO