Chart.js 不支持 Angular 1.5?
Chart.js not working on Angular 1.5?
我正在用 Angular 做一些测试,想尝试这个很棒的库来制作测试应用程序,但它不起作用:
ReferenceError: Chart is not defined angular-chart.js:13:5 Error:
[$injector:modulerr]
http://errors.angularjs.org/1.5.0-rc.1/$injector/modulerr?p0=chartist&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.0-rc.1%2F%24injector%2Fmodulerr%3Fp0%3Dchart.js
这是我的 HTML 模板:
<!DOCTYPE HTML>
<html ng-app="chartist">
<head>
<meta charset="UTF8">
<!-- Plugins/Frameworks !-->
<script type="text/javascript" src="plugins/angular.js"></script>
<script type="text/javascript" src="plugins/angular-route.js"></script>
<script type="text/javascript" src="plugins/angular-chart.js"></script>
<!-- JS !-->
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers.js"></script>
<!-- <script type="text/javascript" src="js/directives.js"></script>
<script type="text/javascript" src="js/services.js"></script> !-->
<!-- Stylesheets !-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/angular-chart.css">
</head>
<body>
<div ng-view>
</div>
</body>
</html>
然后我通过这种方式在模块中注入依赖:
var app = angular.module('chartist', ['ngRoute', 'controllers', 'chart.js']);
app.config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/index', {
templateUrl: 'templates/main.html',
controller: 'mainCtrl'
}).
otherwise({
redirectTo: '/index'
});
}]);
为什么我不能使用 Chart.js?是不是版本问题?我会很高兴有人帮助。
如果你仔细看错误,它确实说得很清楚
ReferenceError: Chart is not defined angular-chart.js:13:5 Error:
[$injector:modulerr]
基本上 angular-chart.js
不能单独工作 API。它只是包装器指令,可以很容易地与 AngularJS 代码兼容。如果你看 angular-chart.js 代码,你会知道它使用 Chart
对象,它来自 chart.js
API.
要解决您的问题,您需要在 angular-chart.js
之前添加 chart.js 引用,因为 Chart
对象将可用呈现图表。
所以请在 angular-chart.js
之前添加 chart.js cdn reference
引用以使您的代码正常工作。
我还希望您阅读 angular-chart.js 入门文档
我正在用 Angular 做一些测试,想尝试这个很棒的库来制作测试应用程序,但它不起作用:
ReferenceError: Chart is not defined angular-chart.js:13:5 Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0-rc.1/$injector/modulerr?p0=chartist&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.0-rc.1%2F%24injector%2Fmodulerr%3Fp0%3Dchart.js
这是我的 HTML 模板:
<!DOCTYPE HTML>
<html ng-app="chartist">
<head>
<meta charset="UTF8">
<!-- Plugins/Frameworks !-->
<script type="text/javascript" src="plugins/angular.js"></script>
<script type="text/javascript" src="plugins/angular-route.js"></script>
<script type="text/javascript" src="plugins/angular-chart.js"></script>
<!-- JS !-->
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers.js"></script>
<!-- <script type="text/javascript" src="js/directives.js"></script>
<script type="text/javascript" src="js/services.js"></script> !-->
<!-- Stylesheets !-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/angular-chart.css">
</head>
<body>
<div ng-view>
</div>
</body>
</html>
然后我通过这种方式在模块中注入依赖:
var app = angular.module('chartist', ['ngRoute', 'controllers', 'chart.js']);
app.config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/index', {
templateUrl: 'templates/main.html',
controller: 'mainCtrl'
}).
otherwise({
redirectTo: '/index'
});
}]);
为什么我不能使用 Chart.js?是不是版本问题?我会很高兴有人帮助。
如果你仔细看错误,它确实说得很清楚
ReferenceError: Chart is not defined angular-chart.js:13:5 Error: [$injector:modulerr]
基本上 angular-chart.js
不能单独工作 API。它只是包装器指令,可以很容易地与 AngularJS 代码兼容。如果你看 angular-chart.js 代码,你会知道它使用 Chart
对象,它来自 chart.js
API.
要解决您的问题,您需要在 angular-chart.js
之前添加 chart.js 引用,因为 Chart
对象将可用呈现图表。
所以请在 angular-chart.js
之前添加 chart.js cdn reference
引用以使您的代码正常工作。
我还希望您阅读 angular-chart.js 入门文档