Installation de Chart.js

Version imprimable

09/07/2018, 11h33
tengalice49

Installation de Chart.js

Salut,

J'aimerais realiser des graphiques sur mon site web en utilisant Chart.js (ou autre mais c'est le premier qui m'est tombe sous la main). http://www.chartjs.org/docs/latest/

Cependant je ne sais pas du tout comment installer les bibliotheques pour Chart.js.
Mon site est heberge par 1and1.fr, est ce que je dois placer des fichiers sur le serveur? Lesquels?

Merci pour votre aide
09/07/2018, 18h04
NoSmoking

Bonjour,
il n'y a pas à proprement parler d'installation à faire mais il te faut simplement inclure le fichier de la bibliothèque dans ton fichier, par exemple

Code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

Pour le moment j'essaye d'afficher cet exemple:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<canvas id="myChart" width="400" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js">
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

Mais rien ne s'affiche, je vois que le canvas a pris de la place entre le corps de page et le bas de page mais aucun graphique ne s'affiche, a tout hasard est ce que je ne dois pas utiliser un de ces outils? : http://www.chartjs.org/docs/latest/g...tallation.html

Citation:

Mais rien ne s'affiche ...

ton script n'est pas pris en compte et ce pour une simple raison le script déclaré entre balise <script></script> n'est pas pris en compte si il est fait référence à une src dans celle-ci.

Il te faut séparer les deux, l'inclusion d'un script et la déclaration inline.
Code:

1 2 3 4 5 6 7 8  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>  <script> var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { // la suite de ton code </script>
Remarque : Même pour un petit exemple je te conseille de mettre en place un structure HTML de document minimale quelque chose comme
Code:

1 2 3 4 5 6 7 8 9 10 11 <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> <script></script> <style></style> </head> <body> </body> <html>

10/07/2018, 10h19
tengalice49

Citation:

Il te faut séparer les deux, l'inclusion d'un script et la déclaration inline.

Effectivement ca fonctionne mieux comme cela!

Merci beaucoup pour ton aide!

Concernant la structure html, j'ai mis ce code dans un fichier que j'appelle ensuite (require en php), donc ma structure html est presente dans mon fichier principal :)

Encore merci.