圖表在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>

（忽略type =“ email”，僅用於css-bootstrap規則）。

這些是我的進口：

<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

只是輸入type =“ email”破壞了數字值。 現在它們可以正確渲染了！