Angular Chart, aucun graphe ne s'affiche

Par Silvère stOne, il y a 11 ans

Javascript

Salut!
Dans le soucis de présenter un graphe dans une app, j'ai exploité Chartist.js et il fonctionne correctement. Mais il n'est pas aussi paramétrable que je souhaiterait. Alors j'ai fouiné et j'suis tombé sur Angular Chart. Le soucis, la doc ([http://jtblin.github.io/angular-chart.js/#top]) n'est pas vraiment explicite au niveau des dépendances. Avec la structure suivante, ma console ne me retourne plus d'erreur mais le graphe ne s'affiche tout de meme pas...

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script type="text/javascript" src="chart/chart.min.js"></script> <script type="text/javascript" src="angular-chart/angular-chart.min.js"></script> // Puis un simple copier-coller angular.module("app", ["chart.js"]).controller("LineCtrl", 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.onClick = function (points, evt) { console.log(points, evt); }; });

Merci! Vous me sauvez! ^^

4 réponses

kal-el, il y a 11 ans

Ayant déjà utilisé ce plugin dans le passé, je pense pouvoir t'aider. Cependant, j'ai quelques questions :

  • As-tu des erreurs dans la console liée aux fichiers Javascript que tu utilise (chart.min.js...etc...) ?
  • Est-ce que ton code HTML ressemble au snippet ci-dessous ?
<canvas id="line" class="chart chart-line" legend="true" data="data" labels="labels" series="series"></canvas>

Enfin, au vue de ton code, tu ne semble pas importer le fichier css angular-chart.css. Ce fichier n'a pas d'impact sur la façon dont le graphe s'affiche, il est surtout utilisé pour les légendes mais dans la mesure ou tu as parler de dépendence, s'en est une.

Silvère stOne, il y a 11 ans

Salut @kal-el !

  • Ma console ne me retourne aucune erreur
  • pour le snippet, je crois que c'est bon
  • j'ai pas omis de lier la css..
    voila mon code... ... <link type="text/css" rel="stylesheet" media="all" href="/css/angular-chart.css"/> <script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> </head> <body>

<canvas id="line" class="chart chart-line" data="data"
labels="labels" legend="true" series="series"
click="onClick">
</canvas>

<script type="text/javascript" src="/js/plugins/chartist/chartist.min.js"></script>
<script type="text/javascript" src="/js/plugins/Chart/Chart.min.js"></script>
<script type="text/javascript" src="/js/plugins/angular-chart/angular-chart.min.js"></script>

<script type="text/javascript">
angular.module("app", ["chart.js"]).controller("LineCtrl", 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.onClick = function (points, evt) {
console.log(points, evt);
};
});
</script>
...

Merci! tu me sauves là!
kal-el, il y a 11 ans

Merci de ta reponse. Est-tu sur d'initialiser correctement ton application Angular? Ton code me parait correcte. Verifie que tu as bien un ng-app="app" dans ton code HTML et que tu instancie bien ton controller. Un truc du genre :

<body ng-app="app"> <div ng-controller="LineCtrl"> <canvas id="line" class="chart chart-line" legend="true" data="data" labels="labels" series="series"></canvas> </div> </body>
Silvère stOne, il y a 11 ans

:) J'suis vraiment bleufé... Devine quoi?... ça marche!!! c'est fou comme cela peut faire énormement de bien! J'te dois une fière chandelle @kal-el, les forums... je Kiff!!! ^^