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

只是输入类型=“电子邮件”破坏了数字值。现在他们正确渲染！

图表在Angular中无法正确呈现

1 个答案: