Les graphiques et les diagrammes fournissent un affichage visuel simple et rapide des statistiques, ce qui facilite la traduction et la comparaison des informations. Un graphique ou un tableau bien présenté peut rendre votre site Web plus attrayant.

Placer un bon graphique sur votre site Web peut être réalisé en utilisant Chart.js. Il s’agit d’une bibliothèque de scripts de visualisation de données.

Produire des graphiques et visualiser des données peut être une première pour vous. Vous l’avez peut-être également essayé et découvert à quel point il est difficile de le faire correctement.

Voici une liste d’exemples Chart.js à coller dans vos projets.

Dans Chart.js, il existe une variété d’affichages visuels fonctionnels, notamment des graphiques à barres, des graphiques à secteurs, des graphiques linéaires, etc.

Les graphiques offrent des options de réglage fin et de personnalisation qui vous permettent de traduire des ensembles de données en graphiques visuellement impressionnants.

En savoir plus sur Chart.js

Chart.js est similaire à Google Charts ou Chartist, en fournissant une vaste bibliothèque de scripts pour la visualisation de données JavaScript.

Il est disponible sur GitHub, il s’agit donc d’une bibliothèque open source gérée par la communauté.

Les scripts de la bibliothèque Chart.js sont disponibles pour une utilisation en JavaScript. Une fois copiés, les scripts peuvent ensuite être imbriqués dans l’élément HTML < canvas >.

Il existe également des options pour utiliser les graphiques dans des frameworks frontend tels que React, Vue et Angular.

Tous les graphiques de la bibliothèque sont réactifs, ce qui signifie qu’ils peuvent être affichés dans des fenêtres de différentes tailles. Ils s’adaptent parfaitement aux petits écrans mobiles et aux écrans d’appareils plus grands.

Outre la réactivité, les graphiques offrent de bonnes performances de rendu sur tous les navigateurs modernes. Cela signifie que peu importe la façon dont un visualiseur affiche vos graphiques, ils seront rapidement disponibles et clairement visibles.

Les exemples Chart.js disponibles incluent :

Graphiques à barres – Les options incluent les groupes verticaux, horizontaux, multi-axes, empilés et empilés.
Graphiques linéaires – Les options incluent Basic, Multi-Axis, Stepped et Interpolation. Vient également avec des options pour différents styles de ligne, styles de points et tailles de points pour une personnalisation complète.
Cartes radar
Camemberts
Graphiques en anneau
Graphiques à bulles
Nuage de points
Cartes des zones polaires

Des graphiques de plusieurs types peuvent être combinés pour produire une superposition des informations dans différents formats.

Diverses modifications du style de graphique peuvent également être trouvées dans la bibliothèque, y compris les options d’échelle, de légende et d’info-bulle. Cela vous permet de personnaliser la visualisation des données en fonction des besoins du projet et de vos préférences personnelles.

Meilleurs exemples Chart.js

Mise à jour PoC Live Chart.js

Graphique personnalisé.js Gradient

Cet exemple Chart.js montre comment utiliser et implémenter un dégradé personnalisé avec Chart.js. Il utilise également une astuce de rembourrage pour éviter l’effondrement de la hauteur du graphique lors du chargement de la page.

Bac à sable Chart.js-plugin-annotation

Cet exemple est idéal pour dessiner une boîte à l’aide de la bibliothèque d’annotations Chart.js.

Chart.js – Mode de fusion – multiplier

Il s’agit de la multiplication du mode de fusion de toile appliquée sur le graphique Chart.js avec dégradé.

Graphique en anneau SVG avec animation et info-bulle

Il s’agit d’un plugin jQuery léger spécialisé dans le dessin de graphiques en anneau.

Exemple de graphique.js

Il s’agit d’un exemple Chart.js affichant de beaux graphiques tout en étant simple et facile à utiliser.

Supprimer l’info-bulle et la légende Chart.js

Cela permet de supprimer l’info-bulle et la légende dans Chart.js avec des options globales.

Moyen – Un tableau de bord magnifique et réactif

Chart.js – Graphique en courbes de température

Ce graphique en courbes Chart.js contient des points transparents et des étiquettes personnalisées.

Graphique polaire Chart.js

Rapport de ventes – Version sombre

Les plugins utilisés peuvent être trouvés dans progressbar.js/chart.js

Chart.js – Mise à jour dynamique du graphique via des requêtes Ajax

Chart.js – Graphique radar, ombres, survol personnalisé

Ce radar Chart.js comprend des ombres et un effet de survol personnalisé.

Chart.js 1.x Exemple

Graphique en ligne

C’est tout ce dont vous avez besoin pour créer un graphique linéaire minimum dans Chart.js. Insérez-le simplement quelque part dans votre après avoir déclaré le HTML5 .

Tous les exemples Chart.js suivent le format ci-dessus, pour la plupart, vous obligeant à ne l’apprendre qu’une seule fois.

Diagramme à secteurs SVG avec info-bulle et effets de survol

Chart.js – Carte de la zone polaire + légendes personnalisées + couleurs aléatoires

Graphiques horizontaux empilés avec Chart.js

Cela montre comment créer des graphiques empilés horizontalement.

Graphique à barres groupées Chart.js

Info-bulle personnalisée Chart.js Donut

Modèle de tableau de bord Vue

Cela a été fait avec Vue, Tachyons et Chart.js.

Un exemple de beignet Chart.js

Chart.js – Mode de survol de l’info-bulle du graphique en courbes

Chart.js Widget de tableau de bord réactif

Il s’agit d’un graphique apparemment simple, mettant en évidence un seul point de données présenté comme un défi unique. Chart.js fournit une fonction d’info-bulle, mais par défaut, il n’y a pas de contrôle direct pour une sélection ciblée. Les info-bulles sont toutes activées ou toutes désactivées. Pour résoudre ce problème et mettre en surbrillance individuellement, onAnimationComplete est utilisé pour une fonction utilisant une instruction if pour sélectionner un point sur une étiquette spécifiée.

Chart.js en PNG en utilisant phantomjs/casperjs

Voici un prototype conçu pour transformer un graphique en PNG en utilisant phantomjs/casperjs inséré dans les rapports mensuels des clients envoyés par e-mail.

Chart.js – Barre avec échelle de temps

Graphique à bulles

Exemple simple de Chart.js

Chart.js – Beignet lisse

Ce sont des majuscules lisses appliquées sur un graphique en anneau Chart.js.

Chart.js en mode bootstrap

Chargez un graphique linéaire à partir de Chart.js dans un modal bootstrap. Les données du graphique provenaient des liens attribués.

Chart.js Carte de la zone polaire

Chart.js Barres arrondies

Ce code d’extension de coins de graphique à barres arrondies pour Chart.js.

Chart.js zoom et panoramique

Il s’agit d’un zoom et d’un panoramique à l’aide de chartjs-plugin-zoom.

Tableau des compétences

Ceci est un graphique pour votre portefeuille utilisant Chart.js.

Statistiques du vin SFW

Gradients Chart.js

Graphiques Sparklines Chart.js

Utilisez Chart.js avec Zepto pour produire des Sparklines. Les sparklines peuvent être utilisées en ligne pour représenter une tendance rapide.

Donut Chart – JS Raphael (Réactif)

Donut Chart – JS Raphael avec mise en page réactive

Expérimentations avec Chart.js

Graphique polaire Chart.js

Exemple de graphique radar Chart.js

Il s’agit d’une démonstration d’un graphique de résultats avec des exemples de données attendues à l’aide de Chart.js.

Exemple de graphique angulaire ionique

Ici, un exemple angulaire Chart.js de base pour les applications Ionic est affiché.

Exemple de page d’administration Bootstrap

Graphique à bulles Chart.js

Tracer avec Bootstrap, Chart.js

Test graphique.js

Ceci est un test simple pour Chart.js.

Démo de graphique en courbes angular-chart.js

Chart.js – changer le type de graphique et randomiser les données

Ceci a été créé pour présenter l’option de liste déroulante pour modifier votre graphique Chart.js (indice : vous devez d’abord détruire le graphique !). De plus, une fonction amusante pour randomiser les points de données sur un clic de bouton a été ajoutée, qui utilise l’impressionnante animation intégrée.

Sans titre

Chart.js Masquer d’autres ensembles de données lors d’un clic sur la légende – Option logique 1

Graphique à bulles Chart.js

Le défilement ionique Chart.js horizontal

Preuve de concept : Chart.js avec dégradé de fond

Il s’agit d’un graphique linéaire qui visualise le poids au fil du temps. Le graphique en courbes a un dégradé d’arrière-plan pour indiquer les valeurs supérieures.

Graphique en courbes Chart.js avec opacité

Exemple de graphique à barres Chart.js

Vue.js & Chart.js

Options d’échelle de Chart.js

Disposition de conception de marketing par e-mail Chart.js

Il s’agit d’une mise en page de conception réactive de base utilisant Chart.js. Il appelle le jeu de couleurs par défaut pour les éléments chart.js tout en ajoutant des boutons et des entrées de données (conception uniquement) qui seraient utiles dans un système de marketing par e-mail.

Chart.js Points radar déplaçables

Ce plugin Chart.js donne la possibilité de faire glisser les points radar de haut en bas. Ajoutez quelques ajustements pour une course plus fluide.

Prototype rapide d’application de santé iOS

Créez rapidement un prototype de l’application iOS Apple Health à l’aide de Chart.js + Dragula. Glissez-déposez et cliquez sur les contrôles segmentés pour observer l’actualisation des données.

Graphique à colonnes empilées Chart.js

Chart.js – Le graphique radar affiche uniquement la dernière ligne d’échelle

Graphique angulaire.js

Graphique.bundle.js RequireJS

Graphiques à bascule dans Angular/Chart.js

Tableau de jauge

Il s’agit d’un simple graphique de jauge pour Chart.js.

Chart.js Donut Centre Pourcentage

Un exemple utilisant les info-bulles personnalisées Chart.js pour générer une étiquette de pourcentage au centre du beignet lorsqu’un utilisateur passe la souris sur une section peut être trouvé ici.

Interface utilisateur du suivi des livraisons

J’ai utilisé Chart.js pour créer le graphique linéaire et c’était un bon projet pour tester BEM.

Chart.js met à jour le type de graphique + redimensionnable

Graphique linéaire D3

Il s’agit d’un graphique linéaire SVG animé réalisé avec d3.js.

Exemple de graphique linéaire Chart.js

Grille Chart.js pour le thème sombre

Faire pivoter un graphique en anneau (Chart.js)

Il s’agit d’un stylo rapide pour illustrer une nouvelle propriété qui peut être utilisée pour faire pivoter un graphique en anneau. Cet exemple est spécifique à la bibliothèque Chart.js.

Chart.Bands.js

Ces graphiques sont agréables à regarder et faciles à ajouter à un site statique. Et si vous vouliez les ajouter dans WordPress ?

Présentation de wpDataTables, le plug-in de tableaux et de graphiques n ° 1 pour WordPress.

Chaque tableau WordPress peut être utilisé comme source de données pour créer des graphiques WordPress. Les graphiques sont rendus par 3 moteurs puissants et peuvent changer en temps réel: Google Charts, HighCharts et Chart.js. Consultez cette page de documentation facile à suivre où nous présentons comment créer un graphique dans WordPress avec notre plugin convivial.

Si vous avez apprécié la lecture de cet article sur les exemples Chart.js, vous devriez consulter celui-ci sur les conceptions de graphiques.

Nous avons également écrit sur quelques sujets connexes tels que les types de graphiques, l’alternative Highcharts et comment créer de superbes graphiques WordPress.

Source d’enregistrement: wpdatatables.com