Une introduction à la graphique.js 2.0

Cet article fait partie de notre anthologie JavaScript moderne . Pour un guide complet du JavaScript moderne, explorez SitePoint Premium et téléchargez votre copie.

Examen par des pairs par Tim Severien et Simon Codrington. Merci à tous les pair-critiques de SitePoint!

Les sites Web lourds de données exigent une visualisation efficace des données. Les nombres bruts sont difficiles à saisir pour les humains; Les graphiques et les graphiques offrent des alternatives intuitives et accessibles, même pour les orateurs non anglais. Les visuels clairs améliorent la compréhension et l'attrait du site Web.

Ce tutoriel présente Chart.js, une bibliothèque de cartographie JavaScript. Grâce à six exemples, nous allons démontrer son utilisation et sa configuration.

Caractéristiques clés de Chart.js 2.0:

bibliothèque JavaScript polyvalente et conviviale pour la création de graphiques divers.
Installation simple et courbe d'apprentissage rapide.
prend en charge divers types de graphiques: ligne, barre, radar, zone polaire, tarte et beignet. Le type de graphique est facilement modifié via la propriété
• . type
Caractéristiques améliorées: réactivité mobile et titres intégrés.
Interactivité personnalisable (par exemple, basculer les ensembles de données via des clics de légende).
Options de personnalisation étendues pour l'apparence (couleurs, info-bulles, animations).

Pourquoi chart.js?

chart.js équilibre la facilité d'utilisation avec une personnalisation puissante. Il évite la courbe d'apprentissage abrupte des bibliothèques plus complexes tout en offrant une grande flexibilité. Ses huit types de graphiques couvrent la plupart des besoins de visualisation. La communauté des open source active assure une maintenance de haute qualité. La version 2.0 a introduit des améliorations de syntaxe importantes et un support mobile. Ce tutoriel utilise le graphique.js 2.0. Une section sur la transition 1.0 à 2.0 est incluse.

Installation du graphique.js:

chart.js priorise la simplicité. La méthode d'installation la plus simple est via un CDN:

<🎜>

Vous aurez également besoin d'un élément

: <canvas></canvas>

<canvas id="myChart"></canvas>

Alternativement, utilisez un gestionnaire de packages (voir le guide de démarrage pour plus de détails).

Explorons les capacités de Chart.js.

Tableau de ligne:

Ce graphique de ligne minimale démontre la structure de base de Chart.js:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
    datasets: [{
      label: 'apples',
      data: [12, 19, 3, 17, 6, 3, 7],
      backgroundColor: "rgba(153,255,51,0.4)"
    }, {
      label: 'oranges',
      data: [2, 29, 5, 5, 2, 3, 10],
      backgroundColor: "rgba(255,153,0,0.4)"
    }]
  }
});

Voir Codepen Exemple

Explication:

• : obtient le contexte de rendu 2D du ctx. <canvas></canvas>
• : Crée l'objet de graphique. new Chart(ctx, { ... }) Spécifie le type de graphique; type détient les données du graphique. Les indices de tableau déterminent les positions des graphiques. data

Astuce pro: Clicking Legends bascule les ensembles de données. Cela s'applique à tous les types de graphiques.

Graphique à barres:

Changez simplement type: 'line' en type: 'bar' dans l'exemple précédent.

Voir Codepen Exemple

Tableau radar:

changer type en 'radar'. Ajuster backgroundColor et borderColor pour une meilleure lisibilité avec les données qui se chevauchent.

Voir Codepen Exemple

Graphique polaire:

changer type en 'polarArea'. Les graphiques polaires visualisent des ensembles de données uniques.

Voir Codepen Exemple

graphiques de tarte et de beignets:

changer type en 'pie' ou 'doughnut'. Les graphiques de beignets utilisent cutoutPercentage pour contrôler la taille du trou.

Voir Codepen Exemple (PIE) Voir Codepen Exemple (beignet)

Chart.js Configuration (options):

La propriété options permet une personnalisation approfondie:

• Titres: Ajouter des titres en utilisant options: { title: { display: true, text: 'My Chart' } }.
• cutoutPercentage: contrôle la taille du trou du graphique de beignets (0-50).
• Tableaux à barres empilés: Utilisez options: { scales: { yAxes: [{ stacked: true }] } } pour les barres empilées.

Gestion des événements:

Personnaliser le comportement de clic de légende:

<🎜>

Exemple: Dynamic Reption Update:

Voir Codepen Exemple Cet exemple met à jour une légende basée sur les clics de légende.

chart.js 2.0 vs 1.0:

Différences clés:

• Déclaration du graphique: 2.0 utilise un seul intitulé new Chart() avec type, data et options. 1.0 utilise le chaînage de fonction.
• Prise en charge mobile: 2.0 comprend la prise en charge mobile native.
• Titres intégrés: 2.0 propose des titres intégrés.

Conclusion:

chart.js est idéal pour le prototypage rapide des cartes. Ses différents types de graphiques et sa facilité d'utilisation en font un outil précieux pour tout développeur Web. Reportez-vous à la documentation officielle du graphique.

(Remarque: Remplacez par des liens de codev réels pour chaque type de graphique.) https://www.php.cn/link/144b646e159cb47f13a4ebb4c8d00628

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!