带有AngularJS的ChartJS - Canvas不会显示任何内容

I'm trying to use the angular-chartjs library but running into some issues. There are no errors on the page. But the canvas is empty.

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

Anyone has an idea? I've tried reordering the scripts a few times. I just can't figure it out. :(

有人有想法吗？我尝试过几次重新排序脚本。我只是想不出来。 :(

Here is the html.

这是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>

And here is the app initialization:

这是应用程序初始化：

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

And here is the controller for this part:

以下是此部分的控制器：

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'
  };

 });

2 个解决方案

#1

Someone else on my hack team figured it out later that day. Here is the HTML:

我黑客团队中的其他人在那天晚些时候发现了它。这是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>

For more, our github repo (the view was the "cashflow.html" one) and to see how it rendered.

更多信息，我们的github repo（视图是“cashflow.html”），并了解它是如何呈现的。

Probably not the best way to do it.

可能不是最好的方法。

#2

It looks like your missing ng-app in your HTML which would contain which angular app you will be using.

它看起来像你的HTML中缺少的ng-app，它将包含你将使用的角度应用程序。

You can put it in the inside one of the divs wrapping the graph.

你可以将它放在包裹图形的div中。

#1