Angular-Chart.js 不显示图表
Angular-Chart.js it doesn't display the chart
我正在尝试使用 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>
我不明白错误在哪里,
提前感谢您的帮助
您的数据绑定错误
<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>
在 html data="chart-data" 中将是 chart-data="data"
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>
我在尝试您的代码时遇到此错误:
(intermediate value)[e] is not a function angular chart
好像版本不匹配,用我自己的项目试了同样的错误。
请使用 Chart.js
的 V1.1.1,正如@dustin 已经回答的那样。
检查此 fiddle。
我正在尝试使用 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>
我不明白错误在哪里, 提前感谢您的帮助
您的数据绑定错误
<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>
在 html data="chart-data" 中将是 chart-data="data"
angular-chart.js 似乎不支持 Chart.js 的版本 2。下面是一个片段,显示了一个工作图表。它包括 chart.js
的 v1.1.1angular.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>
我在尝试您的代码时遇到此错误:
(intermediate value)[e] is not a function angular chart
好像版本不匹配,用我自己的项目试了同样的错误。
请使用 Chart.js
的 V1.1.1,正如@dustin 已经回答的那样。
检查此 fiddle。