使用 Chart JS 创建图表栏
Creat Chart Bar using ChartJS
我在使用 ChartJS 时遇到问题。我想我没有正确包含 chartjs 库。我正在流动这个http://jtblin.github.io/angular-chart.js/介绍。
我的项目时间表:
-app.html
--应用/
------app.config.js
------app.module.js
------app.rutes.js
------组件/
-----------------visulizationsView.html
-----------------visulizationsCrtl.js
app.html:
<!DOCTYPE html>
<html ng-app="App">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Angular Material style sheet -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/app.config.js"></script>
<!-- Controller-->
<script src="app/components/visulizations/VisulizationsCtrl.js"></script>
<!-- ChartJS-->
<script src="cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<script src="cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css"></script>
</head>
app.module.js:
var app = angular.module('App', ['ngMaterial', 'ngRoute','chart.js']);
app.routes.js:
app.config(function ($routeProvider) {
$routeProvider.when('/my_repos', {
templateUrl: 'app/components/myRepos/myReposView.html',
controller: 'MyReposCtrl'
}).when('/visulizations', {
templateUrl: 'app/components/visulizations/visulizationsView.html',
controller: 'VisulizationsCtrl'
}).otherwise({
redirectTo: '/my_repos'
});
});
VisulizationsCtrl.js:
app.controller('VisulizationsCtrl', function ($scope, GitHubService) {
$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]
];
});
visulizationsView.html:
<canvas id="bar" class="chart chart-bar"
chart-data="data" chart-labels="labels"> chart-series="series"
</canvas
来自控制台的错误:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$inject..
在应用模块之前加载 ChartJS 库
<script src="cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<script src="cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/app.config.js"></script>
<!-- Controller-->
<script src="app/components/visulizations/VisulizationsCtrl.js"></script>
我认为你没有导入 Chart.js...
尝试模块添加 Chart.js
首先添加 <- Chart.js
下一行 <- angular-chart.js
我在使用 ChartJS 时遇到问题。我想我没有正确包含 chartjs 库。我正在流动这个http://jtblin.github.io/angular-chart.js/介绍。
我的项目时间表:
-app.html
--应用/
------app.config.js
------app.module.js
------app.rutes.js
------组件/
-----------------visulizationsView.html
-----------------visulizationsCrtl.js
app.html:
<!DOCTYPE html>
<html ng-app="App">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Angular Material style sheet -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/app.config.js"></script>
<!-- Controller-->
<script src="app/components/visulizations/VisulizationsCtrl.js"></script>
<!-- ChartJS-->
<script src="cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<script src="cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css"></script>
</head>
app.module.js:
var app = angular.module('App', ['ngMaterial', 'ngRoute','chart.js']);
app.routes.js:
app.config(function ($routeProvider) {
$routeProvider.when('/my_repos', {
templateUrl: 'app/components/myRepos/myReposView.html',
controller: 'MyReposCtrl'
}).when('/visulizations', {
templateUrl: 'app/components/visulizations/visulizationsView.html',
controller: 'VisulizationsCtrl'
}).otherwise({
redirectTo: '/my_repos'
});
});
VisulizationsCtrl.js:
app.controller('VisulizationsCtrl', function ($scope, GitHubService) {
$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]
];
});
visulizationsView.html:
<canvas id="bar" class="chart chart-bar"
chart-data="data" chart-labels="labels"> chart-series="series"
</canvas
来自控制台的错误:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$inject..
在应用模块之前加载 ChartJS 库
<script src="cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<script src="cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/app.config.js"></script>
<!-- Controller-->
<script src="app/components/visulizations/VisulizationsCtrl.js"></script>
我认为你没有导入 Chart.js... 尝试模块添加 Chart.js
首先添加 <- Chart.js
下一行 <- angular-chart.js