the graph in the view is not displayed - Chart.js Angularjs
the graph in the view is not displayed - Chart.js Angularjs
The graph in the view is not displayed:
<canvas class="chart chart-line" chart-data="data" chart-labels="labels"
chart-series="series" chart-click="onClick"></canvas>
test-controller.js:
(function ()
'use strict';
angular
.module('app.test')
.controller('TestController', TestController);
function TestController( $scope, $timeout)
initialize();
function initialize()
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.onClick = function (points, evt)
console.log(points, evt);
;
// Simulate async data update
$timeout(function ()
$scope.data = [
[28, 48, 40, 19, 86, 27, 90],
[65, 59, 80, 81, 56, 55, 40]
];
, 3000);
)();
index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js">
</script>
I use the example
https://github.com/jtblin/angular-chart.js#example
I do not know why the graph is not displayed
1 Answer
1
You can use the same way, make sure that angular-charts and chart.js should have the correct versioned library references.
angular-charts
chart.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
DEMO
(function(angular)
'use strict';
angular.module('myApp', ['chart.js'])
.controller('myController', [function()
var ctrl = this;
ctrl.socialChart =
options :
scales:
xAxes: [
stacked: true,
],
yAxes: [
stacked: true
]
,
type: 'StackedBar',
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
series: ['FACEBOOK', 'GOOGLE', 'TWITTER', 'INSTAGRAM'],
colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'],
data : [
[65, 59, 90, 81, 56, 55, 40],
[28, 48, 40, 19, 96, 27, 100]
]
]);
)(window.angular);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multi Slot Transclude</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController as ctrl">
<canvas id="outreach" class="chart chart-bar" chart-labels="ctrl.socialChart.labels" chart-data="ctrl.socialChart.data" chart-series="ctrl.socialChart.series" chart-colors="ctrl.socialChart.colors" chart-options="ctrl.socialChart.options"></canvas>
</body>
</html>
check the demo above
– Sajeetharan
Aug 29 at 11:18
adding this line:
.module('App.test', ['chart.js'] ) the project breaks down. How to pass the value of ['chart.js'] to the model differently? I added the contents of the controller, but the chart does not display (without a line of code .module('App.test', ['chart.js'] )– 609tom
Aug 29 at 12:17
.module('App.test', ['chart.js'] )
.module('App.test', ['chart.js'] )
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
I added no graph is displayed
– 609tom
Aug 29 at 11:16