i am trying to write a an interactive charts which uses data from JSON and put it in the chart data. To do that I have to combine chart.js and angular together.
我正在尝试编写一个交互式图表,该图表使用来自JSON的数据并将其放入图表数据中。要做到这一点,我必须将chart.js和angular组合在一起。
As guideline I am following http://jtblin.github.io/angular-chart.js/ , but the problem is that it doesn't matter what I will do, the chart doesn't appear.
作为指导我遵循http://jtblin.github.io/angular-chart.js/,但问题是我要做什么并不重要,图表不会出现。
I'll upload part of the code which (I think) occurs the problem.
我将上传部分代码(我认为)发生问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Graph</title>
</head>
<body>
<script src="../node_modules/angular/angular.min.js"></script>
<script src="../node_modules/chart.js/Chart.min.js"></script>
<script src="../node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
<script>
var app = angular.module('app', ['chart.js']);
app.controller('BarCtrl', ['$scope', function ($scope) {
$scope.options = { legend: { display: true } };
$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]
];
}]);
</script>
<div ng-app="app" ng-controller="BarCtrl">
<canvas id="bar" chart-type="type"
chart-data="data" chart-labels="labels"> chart-series="series"
</canvas>
</div>
</body>
</html>
After a long time it finally works:
经过很长一段时间它终于有效了:
Solution:
<script>
var app = angular.module('app', ['chart.js']);
app.controller('BarCtrl', function ($scope) {
$scope.options = { legend: { display: true } };
$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]
];
});
</script>
<div ng-app="app" ng-controller="BarCtrl">
<canvas id="bar" class="chart chart-bar" chart-type="type"
chart-data="data" chart-labels="labels" chart-series="series">
</canvas>
</div>
</body>
</html>
1 个解决方案
#1
1
There seems to be an error in your HTML. Your canvas tags are not closed properly. I noticed that this is an issue if you copy the code from the angular-charts example on their site. Prettying annoying. You may also need to set the height and width of your canvas so that it displays correctly.
HTML中似乎有错误。您的画布标签未正确关闭。我注意到,如果您从其网站上的angular-charts示例中复制代码,则会出现问题。很烦人。您可能还需要设置画布的高度和宽度,以便正确显示。
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script>
var app = angular.module('app', ['chart.js']);
app.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]
];
});
</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" width="400" height="400">
</canvas>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/chart.js/dist/Chart.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
</body>
</html>#1
1
There seems to be an error in your HTML. Your canvas tags are not closed properly. I noticed that this is an issue if you copy the code from the angular-charts example on their site. Prettying annoying. You may also need to set the height and width of your canvas so that it displays correctly.
HTML中似乎有错误。您的画布标签未正确关闭。我注意到,如果您从其网站上的angular-charts示例中复制代码,则会出现问题。很烦人。您可能还需要设置画布的高度和宽度,以便正确显示。
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script>
var app = angular.module('app', ['chart.js']);
app.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]
];
});
</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" width="400" height="400">
</canvas>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/chart.js/dist/Chart.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
</body>
</html>