Vous avez toujours voulu apprendre Chart JS mais vous aviez besoin de comprendre les instructions de manière plus visuelle ? Ce site web aborde Chart JS avec une approche plus visuelle. L'objectif ici est d'assurer un niveau de compréhension plus élevé.
Guide vidéo Chart JS
Chart JS est une merveilleuse bibliothèque JavaScript avec de nombreuses options tout en restant assez compacte. Cela fait de Chart JS un véritable trésor. Il y a beaucoup de possibilités, mais si vous ne comprenez pas comment les utiliser, vous pourriez ne pas les voir. Ce site couvre autant que possible sur Chart JS et toutes ses possibilités. Prêt à explorer ?
Qu'est-ce que Chart.js ?
Souvent, on entend dire que Chart.js est une bibliothèque ou un framework JavaScript pour dessiner des graphiques en JavaScript. Cependant, ce qui est assez surprenant, c'est que lorsque les gens utilisent Chart.js, ils ne voient pas cette connexion avec JavaScript.
Beaucoup ont tendance à oublier que Chart.js est basé sur JavaScript. Ce que je veux dire, c'est qu'ils ne voient pas comment combiner les tableaux JavaScript avec Chart.js en raison de la complexité de la balise canvas utilisée par Chart.js.
Un graphique est dessiné dans une balise canvas. Le code utilisé par Chart.js se compose essentiellement d'instructions pour dessiner des lignes, des points, des cercles et d'autres formes dans un canvas à des coordonnées x et y précises. Une fois que vous comprenez que Chart.js est comme un "Bootstrap" pour le canvas, permettant de dessiner rapidement des graphiques, vous avez une meilleure compréhension de ce que c'est.
Chart.js vous fait gagner du temps car vous n'avez pas besoin d'apprendre l'API canvas. Le code Chart.js est un modèle pré-écrit que l'API canvas peut lire et dessiner immédiatement le graphique que vous désirez. Cet outil qui vous fait gagner du temps vous aide à avancer. Sans lui, vous auriez besoin d'apprendre à coder en Javascript pour que l'API canvas puisse le lire (ou "analyser" en termes de programmation).
Alors revenons à la question : qu'est-ce que Chart.js ? Voici comment je définirais Chart.js :
"Chart.js est un modèle de graphique pré-écrit codé en JavaScript que l'API canvas peut lire."
www.Chartjs3.com
Cette définition vous donne un bon point de départ pour travailler avec. Vous comprenez instantanément que c'est du JavaScript, mais vous voyez également le lien qui explique pourquoi c'est légèrement différent. Il est écrit pour être lisible par la balise canvas. L'API canvas est écrite en JavaScript, mais le code est légèrement différent.
Beaucoup éprouvent des difficultés parce qu'ils ne voient pas cette relation et ne peuvent pas vraiment comprendre Chart.js à un niveau plus profond. Ne pas comprendre comment utiliser l'API canvas ou comment l'écrire en JavaScript n'est pas une mauvaise chose. Cela limitera vos options et restreindra l'interactivité de votre graphique. Cette limitation est ce que beaucoup considèrent comme un obstacle.
Pourquoi vouloir utiliser Chart.js et les obstacles rencontrés
Pour beaucoup de ceux qui souhaitent utiliser Chart.js, ils imaginent de jolis graphiques interactifs et cliquables. Où les données sont extraites d'une base de données ou d'un objet JSON et, une fois que vous cliquez sur un bouton, elles se transforment en quelque chose de nouveau et rafraîchissant. Cela devrait être plus qu'un simple graphique plat standard que l'on voit couramment dans MS Excel. Malheureusement, une fois qu'ils réalisent que l'utilisation de Chart.js nécessite une solide compréhension de plusieurs disciplines (Javascript, Chart.js, l'API Canvas, MySQL, PHP, Node.js, et bien d'autres), cela devient un véritable obstacle pour rendre le graphique interactif.
Comment surmonter l'obstacle dans Chart.js ?
L'objectif de ce livre est de lever l'obstacle que vous rencontrez avec Chart.js. J'ai réalisé de nombreuses vidéos et, après avoir remarqué que les sujets de vidéo les plus couramment regardés concernent Chart.js en relation avec l'interactivité, j'ai décidé d'écrire un livre à ce sujet.
Ce livre est écrit pour vous aider à y parvenir. Il s'agit d'un livre vidéo visuel. Cela signifie que vous apprendrez, mais tous les sujets sont également présentés sous forme de vidéos pour une meilleure explication et compréhension. De nombreux programmeurs sont orientés visuellement, c'est pourquoi ils travaillent avec des sites web et du codage. Voir comment cela fonctionne et comprendre le comment et le pourquoi sont essentiels pour apprendre Chart.js.
Pourquoi la documentation de Chart.js ne couvre-t-elle pas les sujets liés à l'interactivité ?
Vous avez peut-être lu la documentation de Chart.js et découvert qu'elle n'approfondit pas l'interactivité. Le but de la documentation de Chart.js est de vous aider à apprendre à utiliser Chart.js. En d'autres termes, cela sort de leur champ d'application. Comme ils veulent expliquer comment dessiner des graphiques, ils ne couvrent pas la création de l'interactivité car cela relève du code JavaScript, de l'API canvas, de MySQL ou d'autres éléments sans rapport avec Chart.js. Ils s'attendent à ce que vous visitiez leur site parce que vous voulez apprendre à dessiner un graphique dans Chart.js.
Chart.js est appelé un framework JS. Un framework se compose de deux mots, qui sont "frame" et "work". Cela signifie que vous travaillez dans un cadre fixe ou un "frame". Voyez-le comme un cadre de photo qui ressemble à une "frontière" (pensez au CSS). Tout ce qui est en dehors de cette frontière est hors de portée et n'est pas couvert par Chart.js.
Pourquoi ? Si vous voulez apprendre Chart.js avec MySQL, ils s'attendent à ce que vous consultiez la documentation de MySQL, car ils ne sont pas là pour vous l'enseigner. Bien qu'ils soient utiles ensemble, la documentation de Chart.js évite de couvrir ces sujets pour la maintenir concise. Sinon, la documentation deviendrait énorme et ingérable. Pensez à tous les sujets qu'ils auraient à couvrir, y compris de nombreux autres frameworks et langages de programmation.
Interactive Chart.js Documentation
Vous comprenez parfaitement pourquoi la documentation actuelle de Chart.js est rédigée de la manière dont elle l'est. Maintenant, il est temps d'ajouter une couche de complexité en couvrant les aspects interactifs de Chart.js.
Pour créer un graphique interactif, vous devrez connaître plusieurs langages et sujets dans JavaScript.
- Champs de saisie HTML : Les champs de saisie sont le point de départ de l'interactivité sur un graphique.
- Tableaux JavaScript : Sans cette compréhension, vous ne pourriez pas manipuler les données de quelque manière ou format que ce soit.
- Fonctions JavaScript : Les fonctions sont nécessaires pour créer une réponse une fois qu'un bouton a été cliqué ou qu'un effet de survol a été déclenché.
- API Chart.js : Chart.js couvre certains sujets avancés qui vous aident avec les éléments liés à la balise canvas.
- Base de données (MySQL, MongoDB, etc.) : Pour la connexion à la base de données, de nombreuses options sont possibles. Beaucoup de gens se tournent vers un langage de programmation JavaScript complet. Cela signifie que le frontend et le backend sont en JS.
- Langages de script côté serveur (PHP, Node.js, etc.) : Ce sont des "intermédiaires" essentiels pour la communication entre le frontend et le backend (base de données ou serveurs).
Explorons ces sujets dans les chapitres suivants.
Chapitre 1 : Création d'un graphique fixe dans Chart.js
Créer un graphique avec Chart.js est assez simple. La documentation de Chart.js propose un code de démonstration intéressant. Cependant, elle a tendance à laisser de côté certaines explications supplémentaires. La partie cruciale réside dans les blocs, qui sont des morceaux de code qui finissent par être bien connectés. Ils ont un ancien exemple qui provient de Chart.js 2, et je ne recommande pas l'utilisation de ce code spécifique. Apprenez plutôt la nouvelle méthode.
Ces blocs sont généralement structurés en trois parties distinctes, mais il peut parfois y en avoir plus si le graphique comporte des ajustements personnalisés. Ces blocs peuvent être considérés comme le squelette ou la base du code Chart.js. Dans les vidéos, je les désigne souvent comme :
- Bloc de préparation ou bloc de données
- Bloc de configuration
- Bloc d'initialisation
Bloc de préparation ou bloc de données
Le bloc de préparation ou de données comprend toutes les données par défaut que nous utilisons dans notre graphique. Tout, des étiquettes, des ensembles de données, des données (points) et plus encore.
Config or Configuration block
Le bloc de configuration comprend la référence au bloc de données, les options et le type de graphique.
Bloc d'initialisation
Le bloc de rendu ou d'initialisation démarre ou active le processus de dessin du graphique dans la balise canvas à laquelle il fait référence.
Vidéo sur le code squelette de Chart.js
Cette vidéo explique comment prendre l'ancien code de démonstration de la documentation de Chart.js et le convertir en la dernière version, car Chart.js commence à adopter cette structure.
Si vous souhaitez obtenir le code source exact, vous pouvez trouver la page complète avec plus d'explications sur cette page spécifique.
Ce qui inclut la même vidéo ainsi que des informations supplémentaires sur les blocs Chart.js et le code source.
Chapitre 2 : Exploration des blocs de rendu, de configuration et de données.
Alors que le bloc de rendu couvre le dessin du graphique, ce qui explique pourquoi il est appelé bloc de rendu ou de l'initialisation. Comme l'initialisation fait référence au début, il commence à dessiner le graphique depuis le début. Cela devient plus important lorsque vous utilisez l'API chart.destroy. Ce qui est essentiel si vous souhaitez basculer entre différents types de graphiques d'un simple clic sur un bouton.
Différents types de graphiques dans le bloc de configuration
Chart.js 3 propose de nombreux types de graphiques différents par défaut, notamment les types de graphiques suivants :
- Graphique en barres
- Graphique en courbes
- Graphique en secteurs
- Graphique en anneau
- Graphique de dispersion
- Graphique en bulles
- Graphique radar
- Graphique en secteurs polaires
Outre les types de graphiques par défaut, il existe également d'autres options telles que le graphique combo, mais ce ne sont que les options de base intégrées dans Chart.js. Bien sûr, si vous êtes comme la plupart des gens, vous souhaitez toujours expérimenter avec des graphiques plus avancés, qui sont plus personnalisés. Par exemple, un graphique histogramme et d'autres options plus avancées seront abordées ultérieurement.
Cependant, il est assez facile de changer les types de graphiques de base. En regardant Chart.js, tout ce que vous avez à faire, c'est aller dans le bloc de configuration et insérer le type de graphique que vous désirez.
// Bloc de configuration
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};Dans ce cas, vous pouvez voir l'élément en gras qui doit être ajusté. Cependant, que devez-vous faire si vous souhaitez créer une couche d'interactivité ?
Bien que les types de graphiques soient un élément intéressant, ils sont assez simples. La plupart des types de graphiques ont de nombreuses similitudes, mais certains sont différents et peuvent ou non avoir un axe, comme le graphique en secteurs et le graphique en anneau. Ou ils contiennent une structure différente, comme un graphique radar. Nous allons bientôt approfondir ce sujet, mais commençons d'abord par voir comment modifier les données.
Bloc de données et ensembles de données
La partie la plus importante où la plupart de l'attention est concentrée concerne le jeu de données. Le jeu de données est le bloc qui couvre le dessin des points de données. Le but du graphique est de transmettre une histoire de nombres sous forme d'image, ce qui rend les nombres facilement assimilables par l'esprit.
Bien que le codage en dur des nombres soit assez facile, les rendre plus flexibles pose un défi. La principale raison en est la manipulation des tableaux. Être capable de manipuler les données du tableau vous aide à afficher uniquement les valeurs qui doivent être affichées.
Beaucoup de personnes qui travaillent avec Chart.js ont tendance à ne pas vraiment saisir cette partie. La principale raison en est qu'elles voient Chart.js différemment. Souvent, lorsqu'elles découvrent que Chart.js repose en grande partie sur les tableaux, elles réalisent que Chart.js est vraiment du Javascript, mais avec une énorme quantité de code de l'API canvas attaché.
Comment modifiez-vous un tableau?
La modification d'un tableau utilise généralement les 4 méthodes les plus courantes, mais JavaScript dispose d'une liste complète de méthodes de tableau que vous pouvez utiliser. Si vous souhaitez vraiment comprendre cela, assurez-vous d'explorer la Série Chart.js Array. Elle couvre de nombreux éléments différents.
Cependant, pour l'instant, vous fournir les 4 méthodes courantes est une bonne introduction. Si vous en voulez plus, assurez-vous d'explorer la série de 19 vidéos couvrant la manipulation de tableaux.
- Méthode Push de tableau, ajoute une valeur à la fin du tableau.
- Méthode Pop de tableau, supprime la dernière valeur du tableau.
- Méthode Unshift de tableau, ajoute une valeur au début du tableau.
- Méthode Shift de tableau, supprime la première valeur du tableau.
Avec ces quatre méthodes de base pour les tableaux, vous pouvez faire beaucoup de choses. Alors comment les utiliser ? Prenons un exemple ici.
const colors = ['red', 'blue', 'green'];
colors.push('yellow') // colors = ['red', 'blue', 'green', 'yellow'];
colors.pop() // colors = ['red', 'blue', 'green'];
colors.unshift('black') // colors = ['black', 'red', 'blue', 'green'];
colors.shift() // colors = ['red', 'blue', 'green'];Comme vous pouvez le voir, chaque méthode de tableau et comment la réaliser consiste simplement à attacher l'élément du tableau, qui dans ce cas est « couleurs », et à ajouter la méthode du tableau à la fin. Si vous ajoutez une valeur comme avec push ou unshift, vous devez définir la valeur qui sera ajoutée au tableau.
C'est la manière la plus simple de travailler avec un tableau. Il existe également une autre manière plus avancée et puissante appelée les structures de données dans Chart.js.
Les structures de données : une manière avancée pour les ensembles de données
Les structures de données sont l'une des façons les plus puissantes et avancées de faire des choses. Chart.js consacre une petite section à cet élément, ce qui est dommage car les structures de données peuvent vraiment simplifier la manipulation des tableaux. En essence, les structures de données sont des objets JavaScript qui peuvent être lus directement dans votre graphique.
Chart.js a introduit cela car souvent nous obtenons des données à partir de JSON ou d'un objet et modifier l'objet en plusieurs tableaux n'aurait aucun sens. Donc, enseigner à Chart.js à lire une structure existante serait beaucoup mieux, ce qu'ils ont bien introduit dans Chart.js 3.1.
Pour comprendre cela, il y a plusieurs vidéos couvrant ce sujet sur une page séparée. Assurez-vous de regarder toutes les vidéos sur les structures de données .
Cependant, pour vous assurer de bien comprendre l'essentiel, cette vidéo vous donnera une compréhension de base.
Les sujets plus avancés liés aux structures de données peuvent être trouvés sur la page structures de données . Fortement recommandé!
Pour utiliser les structures de données, nous devons réaffecter les valeurs x et y, car nous devons indiquer à Chart.js où obtenir le point de données au lieu de le faire auparavant. Pour cela, comme vous pouvez le constater dans la vidéo, nous utilisons l'analyse (parsing) ainsi que xAxisKey et yAxisKey.
Parser signifie rendre quelque chose lisible pour le langage dans lequel nous le parsions. Dans ce cas, nous analysons le nouvel objet de données pour le rendre lisible par Chart.js afin de dessiner le graphique.
Les structures de données sont l'une des meilleures fonctionnalités de Chart.js, mais elles ne sont pas vraiment claires car elles sont plus quelque chose que vous ne remarquerez que lorsque vous aurez besoin de travailler fréquemment avec des données et des graphiques. Maintenant que nous avons compris l'aspect le plus important des données, nous devrions nous concentrer sur la fonctionnalité.
Chart.js functionality and interactions
L'utilisation des couleurs dans Chart.js peut être très utile pour mettre en évidence quelque chose. Les points de données codés en couleur peuvent communiquer quelque chose sans mots. Par exemple, lorsque nous colorons une valeur négative en rouge et une valeur positive en vert, nous avons communiqué sans dire un mot. Cependant, même si l'utilisateur comprendra probablement intuitivement, il est préférable d'expliquer la signification des couleurs utilisées.
Les paramètres de couleur d'arrière-plan et de couleur de bordure se trouvent dans le bloc de données, à l'intérieur de l'ensemble de données. La vidéo ici explique les options de codage couleur de base, avec du vert et du rouge en fonction de la valeur.
Heureusement, ces options ne sont pas encore compliquées car elles fonctionnent avec des tableaux. Une fois que vous comprenez comment ajouter des valeurs à un tableau, vous pouvez commencer à jouer avec les couleurs de manière plus intuitive. Comme vous le remarquez, chaque fois qu'une nouvelle compétence est maîtrisée, vous pouvez maintenant étendre vos options dans Chart.js.
Ce qui suit sont des concepts spécifiques qui devront être réorganisés en chapitres.
Comprendre la différence entre "Time" et "Time Series" dans Chart.js
Dans Chart.js, nous devons souvent créer des graphiques avec des dates spécifiques. Si vous créez un graphique de marché boursier où votre graphique comporte des données uniquement pour les jours de la semaine, vous aurez des données manquantes ou statiques les week-ends et les jours fériés. Cela peut être indésirable, et vous voudrez peut-être supprimer ces dates spécifiques pour maintenir le graphique propre.
Time Chart JS
Le type de temps dans ce cas n'est pas utile. En effet, il calculera l'espace en fonction de la différence de temps entre les points de données. Par exemple, si le prochain point de données est à une semaine du point de données actuel, il calculera 7 segments d'espace. Cela crée un écart important dans notre graphique. Vous pouvez voir cet écart dans les échelles des abscisses ci-dessous.
Time Series Chart JS
Chart.js dispose d'une fonctionnalité intégrée intéressante pour répondre à cette question spécifique, qui est la série chronologique (timeseries). Elle positionnera chaque date en fonction d'intervalles équidistants. Équidistant provient des mots « égal » et « distant ». En d'autres termes, elle positionnera chaque point de données suivant à une distance égale, quelle que soit la différence entre les années. Voir l'image ci-dessous :
Bien sûr, en faisant cela, nous devrons modifier la façon dont l'échelle présente les dates, car elles pourraient se chevaucher si une grande quantité de données est comprimée entre deux segments.
Comment créer un tableau à partir d'ensembles de données dans Chart JS
La création d'un tableau basé sur les données de Chart.js nécessite une bonne compréhension de JavaScript. Plus précisément, comment créer des éléments de tableau et construire un objet de tableau en JS.
Avec Chart.js, nous sommes capables d'extraire l'objet de données qui est soigneusement organisé pour dessiner le graphique. Cette même donnée est utile pour créer le tableau. La vidéo ci-dessous vous montrera exactement comment faire.
Comment créer un graphique d'entonnoir de vente avec Chart JS
La création d'un graphique en entonnoir de vente dans Chart JS est possible. Cependant, cela nécessite une personnalisation avancée des plugins pour le faire fonctionner. Ce que nous devons comprendre, c'est comment dessiner des formes personnalisées qui transforment les barres en entonnoir.
Si vous êtes prêt pour un niveau avancé de Chart.js, alors cette vidéo sera un excellent défi. Elle suivra l'entonnoir de vente et à chaque étape de l'entonnoir, l'entonnoir se rétrécit en fonction des valeurs de l'ensemble de données.
Comment enregistrer un graphique en tant qu'image dans Chart JS
Pour enregistrer et télécharger un graphique ou un canevas en tant qu'image, nous devrons effectuer quelques étapes. Par défaut, en faisant un clic droit, vous pouvez télécharger et enregistrer le graphique en tant qu'image. Cependant, cela n'est pas très évident pour beaucoup de gens, donc créer un bouton de téléchargement spécial est une excellente alternative.
Comment télécharger un canevas en tant qu'image en cliquant sur un bouton dans Chart JS.
La vidéo ci-dessous vous montrera exactement comment faire cela. Nous allons convertir le canevas en un fichier PNG que nous pourrons télécharger et enregistrer sur notre appareil.
Cours Skillshare à venir bientôt!
J'ai travaillé sur quelques cours Skillshare. Si vous n'avez pas Skillshare et que vous voulez explorer leurs options, vous pouvez obtenir une semaine gratuite de Skillshare en cliquant sur le lien ci-dessous. Il s'agit d'un lien d'affiliation qui me donnera une commission si vous vous inscrivez, cela ne vous coûtera rien pendant cette période gratuite. Et la commission que je reçois sera réinvestie dans les tutoriels et la recherche et développement sur Chart.js :
French 
English 
Chinese 
German 
Korean 
Portuguese (Portugal) 
Portuguese (Brazil) 
Spanish 
Vietnamese