Angular 图表不显示
Angular Charts not display
尝试使用从 cdn 链接中获取的 chart.js 包中的 angular 个图表。 Angular 是 1.5.7,chart.js 是 2.1.6。
我收到以下错误:
angular.js:13708 TypeError: (intermediate value)[type] is not a function
at createChart (angular-chart.js:197)
at angular-chart.js:150
at Scope.$digest (angular.js:17286)
at Scope.$apply (angular.js:17552)
at bootstrapApply (angular.js:1754)
at Object.invoke (angular.js:4709)
at doBootstrap (angular.js:1752)
at bootstrap (angular.js:1772)
at angularInit (angular.js:1657)
at angular.js:31468
HTML代码:
<!DOCTYPE html>
<html>
<head>
<script src="scripts/angular/angular.js"></script>
<script src="scripts/Chart.js"></script>
<script src="scripts/angular/angular-chart.js"></script>
<link rel="stylesheet" type="text/css" href="css/angular/angular-chart.css"/>
<title>Practice</title>
</head>
<body ng-app="appName" ng-controller="indexController">
<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
</body>
<script type="text/javascript" src="scripts/app.js"></script>
</html>
Javascript 文件:
var appOne = angular.module('appName', ['chart.js']);
appOne.controller("indexController", 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]
];
});
知道哪里出了问题以及如何解决吗?我也不明白这个错误。干杯:)
我认为您缺少 chart-series
属性。
<canvas id="bar" class="chart chart-bar"
chart-data="data" chart-labels="labels" chart-series="series">
</canvas
所以问题是由于angular-chart.js和chart.js的版本不兼容。
我最终使用了最新的 angular-chart.js 1.0.0-alpha 版本和 chart.js 2.0.
问题已解决! :)
尝试使用从 cdn 链接中获取的 chart.js 包中的 angular 个图表。 Angular 是 1.5.7,chart.js 是 2.1.6。 我收到以下错误:
angular.js:13708 TypeError: (intermediate value)[type] is not a function at createChart (angular-chart.js:197) at angular-chart.js:150 at Scope.$digest (angular.js:17286) at Scope.$apply (angular.js:17552) at bootstrapApply (angular.js:1754) at Object.invoke (angular.js:4709) at doBootstrap (angular.js:1752) at bootstrap (angular.js:1772) at angularInit (angular.js:1657) at angular.js:31468
HTML代码:
<!DOCTYPE html>
<html>
<head>
<script src="scripts/angular/angular.js"></script>
<script src="scripts/Chart.js"></script>
<script src="scripts/angular/angular-chart.js"></script>
<link rel="stylesheet" type="text/css" href="css/angular/angular-chart.css"/>
<title>Practice</title>
</head>
<body ng-app="appName" ng-controller="indexController">
<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
</body>
<script type="text/javascript" src="scripts/app.js"></script>
</html>
Javascript 文件:
var appOne = angular.module('appName', ['chart.js']);
appOne.controller("indexController", 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]
];
});
知道哪里出了问题以及如何解决吗?我也不明白这个错误。干杯:)
我认为您缺少 chart-series
属性。
<canvas id="bar" class="chart chart-bar"
chart-data="data" chart-labels="labels" chart-series="series">
</canvas
所以问题是由于angular-chart.js和chart.js的版本不兼容。
我最终使用了最新的 angular-chart.js 1.0.0-alpha 版本和 chart.js 2.0.
问题已解决! :)