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

Question

I'm trying to use the angular-chartjs library but running into some issues. 我正在尝试使用angular-chartjs库但遇到了一些问题。 There are no errors on the page. 页面上没有错误。 But the canvas is empty. 但画布是空的。

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

 });

Answer 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. 可能不是最好的方法。

Answer 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. 你可以把它放在一个包裹图形的divs里面。

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

问题描述

2 个解决方案

解决方案1
5 已采纳 2015-02-07 19:05:24

解决方案2
1 2014-09-14 00:46:15

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

问题描述

2 个解决方案

解决方案1 5 已采纳 2015-02-07 19:05:24

解决方案2 1 2014-09-14 00:46:15

解决方案1
5 已采纳 2015-02-07 19:05:24

解决方案2
1 2014-09-14 00:46:15