Installation de Chart.js

**tengalice49** · 09/07/2018, 12h33

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

**NoSmoking** · 09/07/2018, 19h04

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**tengalice49** · 10/07/2018, 10h15

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

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 10/07/2018, 11h01

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<!-- inclusion d'un script externe -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<!-- ton script inline -->
<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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**tengalice49** · 10/07/2018, 11h19

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.

Installation de Chart.js [Chart.js]

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager