带有AngularJS的ChartJS-画布将不显示任何内容

Imalea 发表于 Dev

362

伊玛拉娜

我正在尝试使用angular-chartjs库，但遇到了一些问题。页面上没有错误。但是画布是空的。

有人有主意吗？我试过几次重新排序脚本。我只是想不通。:(

这是html。

<html ng-app="profitly">
  <head>
    <script src="js/lib/jquery.min.js"></script>
    <script src="js/lib/Chart.js"></script>
    <script src="js/lib/angular.min.js"></script>
    <script src="js/lib/angular-route.min.js"></script>
    <script src="js/lib/angular-chartjs.min.js"></script>
    <script src="js/controller.js"></script>
  </head>

  <body ng-controller="MainController" class="container-fluid">
    <div class="wrapper" ng-view>
      <article ng-controller="graph">      
        <cjs-doughnut dataset="someData" options="someOptions" segment-stroke-width="5"></cjs-doughnut>         
      </article>
    </div>
  </body>

<html>

这是应用程序初始化：

var app = angular.module('profitly', ['ngRoute', 'chartjs']);

这是这部分的控制器：

app.controller('graph', function($scope) {

  $scope.someData = {
    labels: [
      'Supply', 
      'May', 
      'Jun'
    ],
    datasets: [
      {
    data: [1, 7, 15, 19, 31, 40]
      },
      {
    data: [6, 12, 18, 24, 30, 36]
      }
    ]
  };

  $scope.someOptions = {
      segmentStrokeWidth: 20,
      segmentStrokeColor: '#000'
  };

 });

伊玛拉娜

那天晚些时候，我的黑客团队中的其他人发现了这个问题。这是HTML：

<article class="col-xs-6 col-md-offset-3 col-md-6 center">
    <canvas id="expenses" width="200" height="100"></canvas>
        <script>
                    var pieData = [
            {
                    value: 20,
                    color:"#878BB6"
            },
            {
                    value : 40,
                    color : "#4ACAB4"
            },
            {
                    value : 10,
                    color : "#FF8153"
            },
            {
                    value : 30,
                    color : "#FFEA88"
            }
    ];
    var pieOptions = {
            segmentShowStroke : false,
            animateScale : true
    }
    var expenses = document.getElementById("expenses").getContext("2d");
    new Chart(expenses).Pie(pieData, pieOptions);
    </script>

</article>