Utilisez Graph.js pour transformer les données en diagrammes interactifs

Feb 9, 2026
Comment
[dix] [dix] [dix]
[dix]
[dix]

En théorie, la création de diagrammes n'est pas difficile. Gestion de la trigonométrie requise pour un tableau à secteurs fait partie des emplois les plus classiques utilisés pour la formation des programmeurs. Il y a beaucoup de bibliothèques de diagrammes visant les attentions des développeurs en ce moment, mais dans cet article, nous allons nous concentrer sur la manière d'utiliser l'outil open source Tableau.js.

[dix]

Nous mettrons la bibliothèque à travers ses pas, créant ainsi un ensemble de diagrammes imprimables à partir de données générées aléatoires. Graphique.js est un particulier populaire outil de conception web Parce qu'il offre un compromis unique entre la facilité d'utilisation et les fonctionnalités avancées, ce qui vous permet de créer des diagrammes interactifs et de vous engager infographie .

Avec le graphique.js, vous pouvez choisir parmi huit types de graphiques différents à ajouter à vos sites Web avec un effort minimal. Le module d'animations récemment ajouté enrichit les diagrammes avec des visuels à la recherche de Snazzy. Créer un nouveau site pour héberger vos diagrammes? Obtenir votre hébergement Web tache sur, et assurez-vous d'essayer un top Générateur de site Web . D'accord, commençons.

Cliquez sur l'icône en haut à droite de chaque image pour l'agrandir.

01. Déployez la bibliothèque

L'utilisation de graphiques.js est répandue, vous pouvez trouver sa version minifiée de divers CDN tels que Cloudflare. Tout simplement le charger avec un & lt; script & gt; tag, et assurez-vous qu'un & lt; Canvas & GT; L'objet est à proximité - graphique.js fait sa magie en utilisant l'infrastructure de rendu fournie dans ce widget.

[dix] 
 & lt; html & gt;
& lt; tête & gt;
& lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.4.0/
Graphique.min.js "& gt;
& lt; / script & gt;
& lt; / tête & gt;
& lt; corps & gt;
& lt; canvas id = "workarea" & gt;
& lt; / canvas & gt;
& lt; / corps & gt;
& lt; / html & gt;

02. Démarrer l'initialisation

First, load up the framework

[dix] [dix]
Tout d'abord, chargez le cadre

Lorsque le cadre est chargé, la prochaine étape consiste à obtenir une poignée Canvas2D pointant au niveau de la & lt; Canvas & GT; instance créée à l'étape précédente. Cela peut ensuite être utilisé pour créer une nouvelle instance de la Graphique() classe, qui est responsable de la manipulation des données, du rendu et de l'interaction. 

 & lt; script & gt;
(fonction() {
var ctx = document.
GetElementyid ('Workarea'). GetContext ('2d');
graphique var = nouveau graphique (CTX,
{
Type: 'Line',
Options: {},
. . .
});
}) ();
& lt; / script & gt;

03. Ajouter une source de données

line chart

[dix] [dix]
Pour notre graphique de ligne, un seul jeu de données est requis

Les classes de graphique prennent un pointeur de données qui fournit un ou plusieurs Base de données objets contenant les informations de mesure réelles. Dans le cas de notre graphique de ligne, un seul jeu de données est nécessaire. Il est livré avec l'élément de données obligatoire et quelques paramètres facultatifs régissant le processus d'affichage réel. 

 var graphique = nouveau graphique (CTX, {
Type: 'Line',
Options: {},
Les données: {
Labels: ["Janvier",
"Février", "mars", "avril", "mai", "juin",
"Juillet"],
Datasets: [{
Étiquette: "Mon premier jeu de données",
Couleur de l'arrière plan:
        'RVB (255, 99, 132)',
couleur de la bordure:
'RVB (255, 99, 132)',
Données: [0, 10, 5,
2, 20, 30, 45],
}]
}
});

04. Arrêtez tout scintillement

Graphique.js est livré avec une logique de redimensionnement sophistiquée, qui - malheureusement - tendance à obtenir une tailles d'écran ne va pas de temps en temps. Limiter la taille de la & lt; Canvas & GT; Élément via CSS, malheureusement, ne fait pas l'affaire. Au lieu de cela, la maintenance et la réactivité du rapport d'aspect doivent être désactivées via le champ d'options accompagnant le constructeur de classes de graphique. 

 & lt; Canvas ID = "Workarea" Style = "Largeur: 800px;
Hauteur: 600px; "& gt; & lt; / Canvas & GT; & lt; / Canvas & GT;
& lt; script & gt;
(fonction() {
var ctx = document.
GetElementyid ('Workarea'). GetContext ('2d');
graphique var = nouveau graphique (CTX,
{
Type: 'Line',

Options: {
Responsible: FAUX, MAINTENANTSPLACRATIO:
faux},

05. Ajouter des mises en page

Pour paraphraser Andrei Tupolev: Maintenant que le petit est volant, évoquons le plus grand. L'échafaudage affirmant que cette étape "multiplie" notre diagramme - au lieu de travailler avec un élément en toile, nous créons maintenant un total de quatre d'entre eux et les organise à l'écran d'une manière similaire à un oscilloscope Lecroïr. Malheureusement, cela ne fonctionne pas bien comme prévu.

[dix] 
 & lt; Canvas ID = "Workarea"
Style = "Position: Absolute; Top: 0%; gauche: 0%;
largeur: 49%; Hauteur: 49%; & gt; & lt; / Canvas & GT; & lt; / Canvas & GT;
& lt; canvas id = "workarea2"
style = "Position: absolu; top: 0%; gauche: 51%;
largeur: 49%; Hauteur: 49%; & gt; & lt; / Canvas & GT; & lt; / Canvas & GT;
& lt; Canvas ID = "Workarea3"
Style = "Position: Absolute; Top: 51%; gauche: 0%;
largeur: 49%; Hauteur: 49%; & gt; & lt; / Canvas & GT; & lt; / Canvas & GT;
& lt; canvas id = "workarea4"
Style = "Position: Absolute; Top: 51%; gauche: 51%;
largeur: 49%; Hauteur: 49%; "& gt; & lt; / Canvas & GT; & lt; / Canvas & GT;

06. apprivoiser les erreurs de rendu

Wrapper <div> tags enforce a structure from the outside

[dix] [dix]
Wrapper & lt; div et gt; Tags appliquent une structure de l'extérieur

Le moyen le plus sûr de gérer des diagrammes.js Les diagrammes de mises en page complexes impliquent l'utilisation de wrapper & lt; div & gt; Mots clés. Ils appliquent une structure de l'extérieur, garantissant ainsi que le moteur de mise en page interne ne peut pas faire plus de mal que nécessaire. Dans ce cas, cependant, assurez-vous de réactiver la fonctionnalité de réactivité. 

 & lt; style div = "Position: absolu; Top: 0%; gauche:
0%; largeur: 49%; Hauteur: 49%; "& gt;
& lt; Canvas ID = "Workarea" & GT; & lt; / Canvas & GT; & lt; /
Canvas & GT;
& lt; / div et gt;
& lt; div style = "Position: Absolute; Top: 0%; gauche:
51%; largeur: 49%; Hauteur: 49%; "& gt;
& lt; canvas id = "workarea2" & gt; & lt; / Canvas & GT; & lt; /
Canvas & GT;
& lt; / div et gt;
& lt; div style = "Position: Absolute; Top: 51%; gauche:
0%; largeur: 49%; Hauteur: 49%; "& gt;
& lt; canvas id = "workarea3" & gt; & lt; / Canvas & GT; & lt; /
Canvas & GT;
& lt; / div et gt;
& lt; div style = "Position: Absolute; Top: 51%; gauche:
51%; largeur: 49%; Hauteur: 49%; "& gt;
& lt; canvas id = "workarea4" & gt; & lt; / Canvas & GT; & lt; /
Canvas & GT;
& lt; / div et gt;
& lt; script & gt;
document.addeventlistener ("Domcontentl
Oaded ", fonction () {
var ctx = document.
GetElementyid ('Workarea'). GetContext ('2d');
graphique var = nouveau
Tableau (CTX, {
taper:
'ligne',
Options:
{},

07. Essayez les barres

Creating bar charts is simple

[dix] [dix]
Créer des graphiques à barres est simple

Toujours rendu des diagrammes de ligne devient fastidieux rapidement. Enlevons les choses en changeant la propriété de type en bar, produisant ainsi des diagrammes de barres tels que celui présenté dans la figure accompagnant cette étape. Nous promouvons le champ de données à la portée "globale" afin d'éliminer la réutilisation. 

 & lt; script & gt;
document.addeventlistener ("DomContentOached", fonction () {
var myfield = {
Labels: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet"],
Datasets: [{
étiqueter:
"Mon premier jeu de données",

BackgroundColor: 'RVB (255, 99, 132)',

Bordercolor: 'RVB (255, 99, 132)',
Données: [0, 10, 5, 2, 20, 30, 45],
}]
};

. . .
CTX = document.
GetElementyID ('Workarea4'). GetContext ('2d');
graphique = nouveau graphique (CTX, {
Type: 'bar',
Options: {},
Données: myfield
});
});
& lt; / script & gt;

08. Évitez les tartes

pie charts taking over the screen

[dix] [dix]
Les cartes à tarte nécessitent un traitement spécial si vous ne voulez pas qu'ils remplissent votre écran entier

En théorie, un graphique à secteurs peut être rendu dans les mêmes lignes. Retirez les propriétés de couleur pour éviter l'apparence uniforme et définissez la propriété Type sur la tarte. Malheureusement, cela ne fonctionne pas bien - une fois fait, le graphique à tarte remplira l'écran entier. Ceci est causé par une spécialité du rendu de tarte qui utilise les "plus grandes" des deux propriétés pour déterminer le rayon de la tarte. 

 var mypie = {
Labels: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet"],
Datasets: [{
Étiquette: "Mon premier jeu de données",
Données: [0, 10, 5, 2, 20, 30, 45],
}]
};
CTX = DOCUMENT.GETTELEMENTBYID ('WORKAREA2').
getContext ('2d');
graphique = nouveau graphique (CTX, {
Type: 'Pie',
Options: {},
Données: myPie
});

09. Résoudre le problème

Ouvrez le fichier 'index.js' créé à l'étape 1. Commencez par spécifier le type de graphique en tant que ligne et ajouter les données à être représentées visuellement comme indiqué ci-dessous. 

& lt; corps & gt;
& lt; div style = "Position: absolu; top: 0%;
à gauche: 0%; largeur: 49%; Hauteur: 49%; "& gt;
& lt; Canvas ID = "Workarea" & GT; & lt; /
Canvas & GT; & lt; / Canvas & GT;
& lt; / div et gt;
& lt; div style = "Position: absolu; top: 0%;
à gauche: 51%; largeur: 29%; Hauteur: 49%; "& gt;
& lt; canvas id = "workarea2" & gt; & lt; /
Canvas & GT; & lt; / Canvas & GT;
& lt; / div & gt;

10. Laissez le graphique.js réaffainement le diagramme

Une autre approche pour résoudre le problème consiste à ré-désactiver le maintespectratio fonctionnalité. De cette façon, le moteur de diagramme est autorisé à réparer le diagramme lorsqu'il voit l'ajustement, en veillant à ce que tout le cercle apparaisse à l'écran. 

 CTX = DOCUMENT.GETTELEYID ('WORKAREA2').
getContext ('2d');
graphique = nouveau graphique (CTX, {
Type: 'Pie',
Options: {MAINTENINSPLATIO: FAUX
},
Données: myPie
});

Page suivante: Terminer la création de votre carte interactive avec grapht.js

[dix] [dix]
  • 1
  • 2

Page actuelle: Utilisation de graphiques.js: étapes 01-10

[dix]
[dix]

Comment - Most Popular Articles

Comment redimensionner une image dans Photoshop

Comment Feb 9, 2026

[DIX] [DIX] [DIX] [dix] [DIX] Savoir Redimensionnerner Une image dans Photoshop est une compétition Fond..

Comment créer des peintures à air plein numériques

Comment Feb 9, 2026

[DIX] [DIX] [DIX] [dix] Obtenez à l'extérieur pour Créer Un excellent art excellent (Crédit d'ima..

Comment utiliser des textures dans Photoshop

Comment Feb 9, 2026

La texture est souvent ce qui combine les lignes entre les œuvres d'art traditionnelles et numériques. Souvent, il est facile de dire la différence entre les deux si votre oeuvre numériqu..

Exporter des animations après les effets sur HTML5

Comment Feb 9, 2026

[dix] [dix] [dix] [dix] L'animation sur le Web est là pour rester. C'est dans tout, des mouvements s..

Tracez une figure en moins de cinq minutes

Comment Feb 9, 2026

Croquis Une pose de cinq minutes est très amusante car elle offre juste assez de temps pour capturer un fort sentiment de pose, mais pas assez de temps pour surcharger (ou trop enthousiastes..

Peindre un paysage marin énergique dans les huiles

Comment Feb 9, 2026

[dix] [dix] [dix] [dix] Matériaux [dix] ..

Comment sculpter au cinéma 4D

Comment Feb 9, 2026

[dix] [dix] [dix] [dix] Lors de l'approche d'un modèle ou d'une scène nécessitant la modélisation..

Créer des illustrations simples pour le web

Comment Feb 9, 2026

[dix] [dix] [dix] [dix] Je me suis assis, j'ai joué de la musique, a atténué les lumières et ouvr..

Catégories