- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
Deviens membre Premium magic_button
Débloque cette session en devenant Membre Premium 🚀
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte person00:00:00 :Dans cette partie, je vais vous présenter la librairie chart.js qu'on va utiliser pour les graphiques.On va ensuite également l'installer à l'intérieur de notre fichier HTML.
00:00:09 :Donc chart.js est une librairie JavaScript qui nous permet de faire des graphiques qui sont assez sympas.Malheureusement, je trouve que ce n'est pas forcément la plus simple à utiliser.
00:00:18 :On va voir la documentation tout de suite.Vous allez voir que forcément aussi c'est du JavaScript,donc le code est un peu plus ou un peu moins digeste, en tout cas je dirais, que du Python.
00:00:27 :Donc ça va prendre un petit peu d'habitude.Il va falloir regarder un peu cette documentation.On va voir tout ça pas à pas, nous, dans les prochaines parties pour créer nos scripts.
00:00:35 :Mais si vous voulez aller un peu plus loin,vous verrez qu'il y a quand même une petite courbe d'apprentissage qui n'est pas la plus simple.
00:00:42 :Donc ce qu'on peut faire directement, c'est aller sur Get Startedet vous allez voir ici la documentation de chart.js.Donc si on regarde ici par exemple un exemple,si on regarde ici par exemple le code que ça nous donne,vous voyez que c'est du JavaScript.
00:00:56 :Ce n'est pas absolument horrible,mais c'est forcément un petit peu moins digeste que du Python.Notamment si on regarde ici, on se retrouve des fois avec des trucs comme ça,qui personnellement me font un peu mal aux yeux,avec des trucs imbriqués,donc Options, Scales, Y-Axis, Ticks, Begins at 0.
00:01:10 :Donc tout ça pour dire qu'on veut commencer notre graphique à 0.On est obligé d'imbriquer tout ça,donc d'avoir des dictionnaires avec ici une liste qui contient un dictionnaire, etc.
00:01:19 :Donc ce n'est pas très simple à utiliser.Heureusement, on a beaucoup d'exemples.La documentation est quand même assez fournie,donc vous pouvez aller regarder dans la documentation tous les exemples.
00:01:29 :Vous pouvez copier du code, l'ETC dans votre navigateur,donc au moins il y a ça.Et également, si on revient sur la page principale,vous avez une page d'exemples ici, donc sur Samples,vous pouvez cliquer là, et vous avez beaucoup d'exemples de graphes.
00:01:41 :Donc ça c'est un très bon point de départ.S'il y a un graphe précis que vous voulez faire,par exemple si on va voir dans Other Charts ici,il y a des graphiques comme par exemple Radar ici,qui est un type de graphique assez complexe, assez intéressant.
00:01:51 :Et si vous voulez savoir le code qui a servi à générer ce graphique,on peut faire un clic droit dans Chrome, faire Inspect,et aller voir le code source de la page.
00:02:00 :Et ici on a un tag Script qui va contenir tout le code JavaScriptqui permet de générer ce graphique.On peut même modifier ce code.
00:02:07 :On peut modifier notre graphique ici avec les boutons qu'on a à gauche,donc on peut ajouter des datas, enlever des datas, etc.et voir ce que ça nous donne sur la page et dans le code ici.
00:02:16 :Donc ces samples sont assez intéressants.Vraiment, si vous ne savez pas par où commenceret si vous avez vraiment un type de graphique que vous avez en têteque vous voulez refaire, n'hésitez pas à aller voir un peu cette page ici.
00:02:27 :Pour l'instant, nous on va retourner sur la documentation.Donc je vais cliquer ici sur Documentation.On va aller dans Getting Started iciet on va aller chercher le lien pour installer cette librairie.
00:02:36 :Donc là vous voyez qu'il y a plusieurs façons de faire.Encore une fois, nous on va utiliser le CDN,donc le CDN qui est ici.
00:02:42 :Et on va cliquer sur ce lien, cdnjs.comet on se retrouve sur la page qui nous permet d'inclure ce CDN.Donc là, ce qui va nous intéresser, c'est cette partie ici en orange,donc le fichier qui est marqué comme le fichier par défaut.
00:02:55 :On le voit ici avec le petit fond orange et la barre.Et on va pouvoir aller à droite ici,cliquer sur la petite flèche et cliquer sur Copy Script Tag.
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.