angular chart is not visible even though it's there in the page
Question
I am working with angular-chart.js and it's not visible in my page, I have put the charts in the directive.
Code I used:
<div class="row">
<div class="cold-md-12">
<canvas class="chart chart-line"
chart-data="data"
chart-labels="labels"
chart-series="series"
chart-options="options"
chart-dataset-override="datasetOverride"
chart-click="onClick"
style="display:block;width:500px;height:400px;">
</canvas>
</div>
</div>
Controller:
app.controller('detailsController',['$scope',function($scope){
$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.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
$scope.options = {
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
},
{
id: 'y-axis-2',
type: 'linear',
display: true,
position: 'right'
}
]
}
};
}]);
The controller was placed correctly and the developer tools are not showing any error, also I get the element only problem is the visibility of the map.
3 answers
solution1
0 2017-10-05 16:38:07
It works fine with the following,
DEMO
angular.module("app", ["chart.js"]) .controller("ChartCtrl", function($scope) { $scope.moisture = {heading:"Moisture"}; $scope.ph = {heading:"Ph Level"}; $scope.tempreture = {heading:"Soil Temp"}; $scope.water = {heading:"Environment"}; $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.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }]; $scope.options = { scales: { yAxes: [ { id: 'y-axis-1', type: 'linear', display: true, position: 'left' }, { id: 'y-axis-2', type: 'linear', display: true, position: 'right' } ] } }; });
<!DOCTYPE html> <html> <head> <title>radar Chart</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> </head> <body ng-app="app"> <div ng-controller="ChartCtrl" style="width:360px"> <canvas class="chart chart-bar" chart-click="onClick" chart-data="data" chart-labels="labels" chart-options="options" ></canvas> </div> </body> </html>
solution2
-1 2017-10-05 16:39:50
The code seems fine. Since you have not provided the complete code with the issues, I can only guess.
Did you include
'chart.js'in the module dependencies (angular.module('chartDemo', ['chart.js'])).Did you include all the libraries needed.
Please find below a JSFiddle for the same. Let me know if the issue persists, also please replicate the issue using the provided JSFiddle and share back!
solution3
-1 2018-10-10 14:00:02
Update the plugins
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
http://plnkr.co/edit/d6T8TpXJiKpXplJrsOAS?p=preview
Be carefull about the angular-chart.min.js file.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.