圖表在Angular中沒有正確渲染

Question

我有一個使用路由的項目，目前只有一個頁面。我傳遞頁面此控制器：

var ctrls = angular.module('controllers', []); 

ctrls.controller('overviewController', function($scope){ 

$scope.meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", 
       "Junio", "Julio", "Agosto", "Septiembre", "Octubre", 
       "Noviembre", "Diciembre"]; 
$scope.gastos = [0,0,0,0,0,0,0,0,0,0,0,0]; 
$scope.ganancias = [0,0,0,0,0,0,0,0,0,0,0,0]; 


}); 

然後，我已經得到了很多的投入（每月二，所以有24）的工作方式類似於此，一些旨在「gastos」和其他人「ganancias」：

<div class="form-group"> 
     <input type="email" class="form-control" id="" placeholder="Input field" ng-model="gastos[0]"> 
    </div> 

（忽略類型= 「電子郵件」，它只是一個CSS-引導規則）。

這是我進口：

<script src="plugins/angular-min.js"></script> 
     <script src="plugins/angular-route-min.js"></script> 
     <script src="plugins/chart-min.js"></script> 
     <script src="plugins/angular-chart.js"></script> 
     <script src="js/main.js"></script> 
     <script src="js/controllers.js"></script> 
     <link href="css/angular-chart.css" rel="stylesheet"> 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 
     <link href="css/css.css" rel="stylesheet"> 

這應該工作，對不對？當我加載頁面時，我看到數組中的值爲0的輸入。如果我更改了控制器上的值，它們也會顯示在輸入上，所以綁定工作正常。

的問題是，這兩個圖表從來沒有渲染，他們只實例白色小方塊：

<div class="col-6-md chart-area"> 
    <canvas id="doughnut" class="chart chart-doughnut" 
    chart-data="gastos" chart-labels="meses"> 
    </canvas> 
    <canvas id="doughnut" class="chart chart-doughnut" 
    chart-data="ganancias" chart-labels="meses"> 
    </canvas> 
    </div> 

在這裏，你有一個形象，以檢查它是如何看起來：http://i.imgur.com/aY4iBsK.png（仍然有很多工作要這就是爲什麼頁面設計太糟糕了！）。

我很想得到一些幫助，這一點，因爲我不知道這裏發生了什麼......

編輯：

如果你問的主要模塊：

var main = angular.module("main", ['ngRoute', 'controllers', 'chart.js']); 

main.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/overview', { 
     templateUrl: 'templates/overview.html', 
     controller: 'overviewController' 
     }). 
     otherwise({ 
     redirectTo: '/overview' 
     }); 
}]); 

Answer 1

這只是輸入類型=「電子郵件」，這是破壞數字值。現在他們渲染正確！