Question

我正在尝试使用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'
  };

 });

Answer 1

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

更多信息，我们github repo（视图为“cashflow.html”）并查看how it rendered。

可能不是最好的方法。

Answer 2

您的ng-app中似乎缺少HTML，其中包含您将使用的角度应用。

您可以将其放在包裹图表的divs内部。

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

2 个答案: