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

Sep 10, 2025
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

Adobe XD: Comment utiliser la fonctionnalité Auto-Animate

Comment Sep 10, 2025

[DIX] [DIX] [DIX] [dix] (Crédit d'image: Adobe) [DIX] Malgré Son Entrée Tardif Da..

Comment dessiner un chien

Comment Sep 10, 2025

[DIX] [DIX] [DIX] [dix] [DIX] Le Tutoriel d'Aujourd'hui d'Aujourd'hui Vous Montrera Commentaire Dessiner ..

Construire une UI contrôlée par la voix

Comment Sep 10, 2025

NOUS AVONS VU DE NOMBREUSES NOUVELLES API AJOULETES AU WEB AU COURS DES DERNIÈRES ANNÉES QUI CONTRE RÉELLEMENT ACTIVÉ LE CONTENU Web pour AVOIR LE MÊME TYPE DE FONCTIONNÉTIÉ QUE DE NOM..

Comment faire et utiliser un mahlstick pour la peinture

Comment Sep 10, 2025

[dix] [dix] [dix] [dix] Le mahlstick (ou Marotstick, comme il est parfois connu) est un outil de supp..

Créer des nuages ​​avec Fumefx pour 3Ds max

Comment Sep 10, 2025

[dix] [dix] [dix] [dix] Ce guide étape par étape est défini pour révéler comment faire la créat..

Commencez avec la rouille

Comment Sep 10, 2025

[dix] [dix] [dix] [dix] Page 1 sur 2: Page 1 ..

Comment concevoir des formes réactives et agnostiques de l'appareil

Comment Sep 10, 2025

[dix] [dix] [dix] [dix] Qu'il s'agisse d'un flux d'inscription ou d'une étape à pas multifonction, ..

Faites une affiche typographique à l'aide d'Adobe InDesign

Comment Sep 10, 2025

[dix] [dix] [dix] [dix] Adobe InDesign est un excellent programme à utiliser lors de la conception d..

Catégories