Créer facilement des graphiques de stats avec Chart.JS
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Créer facilement des graphiques de stats avec Chart.JS

Carl Brison
19,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce cours en ligne, nous allons apprendre à réaliser des graphiques statistiques en utilisant la librairie JavaScript nommée Chart.js
Nous allons apprendre à utiliser cette librairie JS de manière extrêmement simple. Le but n'étant pas de se noyer avec toutes les possibilités qu'offre Chart.js.

Nous allons voir ensemble les trois graphiques les plus utilisés :

  • Le graphique "camembert"
    Un graphique camembert nous permet d'obtenir visuellement des tranches de statistiques.
  • Le graphique en "ligne"
    Un graphique en ligne nous permet d'obtenir une abscisse ainsi qu'une ordonnée afin de mieux apprécier les hausses ou les baisses. Il nous permet également de pouvoir superposer des lignes de statistiques.
  • Le graphique en "barre"
    Un graphique en barre nous permet d'obtenir un visuel de statistique sous la forme d'une barre plus ou moins haute.

Afin d'utiliser ces graphiques et de les mettre en forme, nous utiliserons le langage JavaScript au travers de la librairie Chart.js.
Ceci nous permettra de positionner un certain nombre d'éléments ainsi que de leur mettre de la couleur afin de rendre nos graphiques plus lisibles et plus limpides.

Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

La version de Chart.js utilisée dans ce tuto est la version 3.7
Pour aller plus loin, je propose une formation pour devenir un Pro du développement en JS.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Installation de la librairie Chart.JS
Chapitre 2
Création d'un graphique de type "camembert"
Chapitre 3
Création d'un graphique de type "ligne"
Chapitre 4
Création d'un graphique de type "barre"
Chapitre 5
Pour aller plus loin

Plan détaillé du cours

Chapitre 1 : Installation de la librairie Chart.JS
13m34s
 
Leçon 1Installer la librairie Chart.JS
Chapitre 2 : Création d'un graphique de type "camembert"
19m44s
 
Leçon 1Créer notre premier graphique de type "camembert"
Leçon 2Mettre en forme notre graphique
Leçon 3Ajouter des options à notre graphique
Chapitre 3 : Création d'un graphique de type "ligne"
12m01s
 
Leçon 1Créer notre graphique de type "ligne"
Leçon 2Superposer deux lignes sur un même graphique
Chapitre 4 : Création d'un graphique de type "barre"
02m21s
 
Leçon 1Créer notre graphique de type "barre"
Chapitre 5 : Pour aller plus loin
10m09s
 
Leçon 1Positionner le graphique sur la page web
Leçon 2Pour aller plus loin

Aperçus

Avis des apprenants

Détail des avis
4
Apprenants
1
Commentaire
5/5
Note moyenne
5/5
1
4/5
0
3/5
0
2/5
0
1/5
0
Bernard Chabloz
Bernard Chabloz
Publié le 22/06/2022
Bel outil! Merci pour sa présentation, agréable et claire comme toujours.
Carl Brison
Carl Brison
Merci beaucoup ;-)))

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

chart JS 3.7

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Les codes sources de ce tuto

Attendez ! 🤗

Accédez à plus de 1334 tutos gratuits

Notre politique de protection des données