可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I am trying to use Angular-chart.js it doesn't display anything for me here is my javascript and html page
(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>
I don't understand where the error is, thanks in advance for your help
回答1:
It looks like angular-chart.js doesn't support version 2 of Chart.js. Below is a snippet, that shows a working chart. It includes v1.1.1 of chart.js
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>
回答2:
Your data binding is wrong
<canvas id="bar" class="chart chart-bar" data="chart-data" labels="chart-labels" ></canvas>
You have no variable chart-data nor chart-labels in your controller. You named them differently.
In fact, the attributes are in reverse order. Should be chart-data="data" chart-labels="labels"
Example from http://jtblin.github.io/angular-chart.js/
<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
回答3:
In html data="chart-data" would be chart-data="data"
回答4:
I was getting this error while trying your code:
(intermediate value)[e] is not a function angular chart
It seems there is a version mismatch, tried the same with my own project got the same error. Please take V1.1.1 of Chart.js, as already answered by @dustin.
Check this fiddle.
