0

我正在尝试使用 Angular-chart.js 它没有为我显示任何内容这是我的 javascript 和 html 页面

(function(){
 angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
    $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
    $scope.series = ['Series A', 'Series B'];

    $scope.data = [
      [65, 59, 80, 81, 56, 55, 40],
      [28, 48, 40, 19, 86, 27, 90]
    ];
 });
})(); 
    
<!DOCTYPE html>
<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.min.js
    "></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css
    " />
    <script src="angular-chart.min.js
    "></script>
    <script src="app.js"></script>
</head>

<body ng-app="app">
    <div ng-controller="BarCtrl">
        <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels"></canvas>
    </div>

</body>

</html>

我不明白错误在哪里，在此先感谢您的帮助

4

4 回答 4

3

看起来 angular-chart.js 不支持 Chart.js 的第 2 版。下面是一个片段，显示了一个工作图表。它包括chart.js v1.1.1

angular.module("app", ["chart.js"]).controller("BarCtrl", function($scope) {
  $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  $scope.series = ['Series A', 'Series B'];

  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
});
<!DOCTYPE html>
<html>

<head>
  <script data-require="angularjs@1.5.3" data-semver="1.5.3" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
  <link rel="stylesheet" href="https://raw.githubusercontent.com/jtblin/angular-chart.js/master/dist/angular-chart.min.css" />
  <script src="app.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="BarCtrl">
    <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
  </div>
</body>

</html>

于 2016-05-10T16:38:04.917 回答
0

尝试您的代码时出现此错误：

(intermediate value)[e] is not a function angular chart

似乎版本不匹配，我自己的项目尝试了同样的错误。请采取 V1.1.1 of Chart.js，正如@dustin 已经回答的那样。

检查这个小提琴。

于 2016-05-10T19:17:08.393 回答
0

在 html data="chart-data" 将是 chart-data="data"

于 2016-05-10T16:06:47.063 回答
0

您的数据绑定错误

<canvas id="bar" class="chart chart-bar" data="chart-data" labels="chart-labels" ></canvas>

您的控制器中没有可变图表数据或图表标签。你给他们起不同的名字。

实际上，属性是相反的顺序。应该是 chart-data="data" chart-labels="labels"

来自http://jtblin.github.io/angular-chart.js/的示例

<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
于 2016-05-10T16:04:24.257 回答