图表在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”破坏了数字值。 现在它们可以正确渲染了！