Utilisez la bibliothèque de graphiques Chart.js pour créer de superbes astuces form_javascript réactives

Bases pour l'entrée

Chart.js est une bibliothèque de graphiques open source basée sur HTML5, qui permet de dessiner de magnifiques graphiques de manière pratique et concise.

Les principales fonctionnalités incluent :

1. Prend en charge 6 types de tableaux différents : graphique en courbes, graphique à barres, graphique circulaire, graphique radar, graphique en zones de coordonnées polaires et graphique en anneaux.
2. Développé sur la base de HTML5 et prend en charge tous les navigateurs (y compris IE7/8).
3. Il ne dépend d’aucune autre bibliothèque, ne fait que 4,5 Ko et peut être personnalisé.

Chart.js est une bibliothèque de graphiques réactive, flexible et légère basée sur un canevas HTML5. Il existe six types de graphiques différents disponibles dans la bibliothèque, chacun avec une gamme d'options de personnalisation. Si cela ne suffit pas, vous pouvez également créer vos propres types de graphiques.

Le code des six types de graphiques de Chart.js ne fait que 11 Ko au total et est compressé en gzip. De plus, la bibliothèque est modulaire, vous ne pouvez donc utiliser que les types de graphiques dont vous avez besoin, économisant ainsi davantage d'espace. Vous trouverez ci-dessous le lien cdnjs qui contient la bibliothèque.

JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

Paramètres disponibles

Des info-bulles aux effets d'animation (NDLR : l'info-bulle fait référence à l'info-bulle qui apparaît lorsque la souris passe sur un élément), Chart.js permet de modifier presque toutes les caractéristiques du graphique. Dans cette section, je vais modifier certains paramètres pour montrer comment Chart.js est créé. Nous allons commencer avec le code HTML suivant :

XHTML

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

Pour la première présentation, je vais créer un graphique linéaire. Quelques options de base doivent être définies pour que le graphique ait un sens. Les graphiques linéaires nécessitent un tableau d'étiquettes et un ensemble de données. Les étiquettes apparaîtront sur l’axe X. J'ai simulé certaines données pour un graphique linéaire, séparées en un tableau, chacun avec sa propre couleur de remplissage, sa propre ligne et son propre ensemble de points.

Dans cet exemple, j'ai défini fillColor sur transparent. Si vous ne définissez pas de valeur fillColor, elle sera par défaut noire ou grise. La même chose s'applique aux autres valeurs. Les couleurs sont définies à l'aide des formats RGBA, RVB, hexadécimal ou HSL, identiques à ceux du CSS.

JavaScript

var lineData = {
 labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 
      'Data 5', 'Data 6', 'Data 7'],
 datasets: [{
  fillColor: 'rgba(0,0,0,0)',
  strokeColor: 'rgba(220,180,0,1)',
  pointColor: 'rgba(220,180,0,1)',
  data: [20, 30, 80, 20, 40, 10, 60]
 }, {
  fillColor: 'rgba(0,0,0,0)',
  strokeColor: 'rgba(151,187,205,1)',
  pointColor: 'rgba(151,187,205,1)',
  data: [60, 10, 40, 30, 80, 30, 20]
 }]
}

Définir les options globales

Dans le code, j'ai défini quelques valeurs globales. animationSteps détermine la durée de l'animation. Si nécessaire, vous pouvez modifier davantage d'options, telles que scaleLineColor et scaleIntegersOnly. Je recommande de parcourir la documentation Chart.js pour voir quelles autres options sont disponibles dans la bibliothèque.

JavaScript

Chart.defaults.global = {
 animationSteps : 50,
 tooltipYPadding : 16,
 tooltipCornerRadius : 0,
 tooltipTitleFontStyle : 'normal',
 tooltipFillColor : 'rgba(0,160,0,0.8)',
 animationEasing : 'easeOutBounce',
 scaleLineColor : 'black',
 scaleFontSize : 16
}

Définir des options de graphique exclusives

En plus des options globales, il existe certaines options de configuration pour des types de graphiques spécifiques. Dans ce graphique linéaire, je vais définir les options suivantes, en espérant vous inspirer :

JavaScript

Chart.defaults.global = {
animationSteps : 50,
tooltipYPadding : 16,
tooltipCornerRadius : 0,
tooltipTitleFontStyle : 'normal',
tooltipFillColor : 'rgba(0,160,0,0.8)',
animationEasing : 'easeOutBounce',
scaleLineColor : 'black',
scaleFontSize : 16
}

Les graphiques générés par Chart.js ne sont pas réactifs par défaut. La définition de responsive sur true le transforme en un graphique réactif. Si vous devez rendre chaque graphique réactif, je vous recommande de définir une valeur globale, comme celle-ci :

JavaScript

Chart.defaults.global.responsive = true;

Ci-dessous, vous verrez un exemple de ce graphique linéaire :

See the Pen Chart.js Responsive Line Chart Demo by SitePoint (@SitePoint) on CodePen.

Ajouter et supprimer des données dynamiques

Parfois, vous devez afficher des données qui changent tout le temps. La bourse est un exemple typique de ce scénario d’application. Dans cette section, je vais créer un histogramme et ajouter des données tout en supprimant dynamiquement les données. Je vais utiliser des données aléatoires et présenter les données sous forme d'histogramme dans cet exemple. La plupart du code de cet exemple est similaire à l'exemple précédent. Une fois que nous avons notre HTML (comme dans l’exemple précédent), nous pouvons ajouter notre propre JavaScript.

Nous devons d’abord écrire du code pour remplir le graphique avec des données dynamiques. J'utilise une expression de fonction pour générer une valeur aléatoire, puis je l'attribue à une variable dData. Ces valeurs nous donneront des données aléatoires lorsque nous devrons les modifier. Comme dans l'exemple précédent, j'ai créé un tableau d'étiquettes et un ensemble de données, et défini un fillColor arbitraire.

JavaScript

var dData = function() {
 return Math.round(Math.random() * 90) + 10;
};
var barData = {
 labels: ['dD 1', 'dD 2', 'dD 3', 'dD 4',
      'dD 5', 'dD 6', 'dD 7', 'dD 8'],
 datasets: [{
  fillColor: 'rgba(0,60,100,1)',
  strokeColor: 'black',
  data: [dData(), dData(), dData(), dData(),
      dData(), dData(), dData(), dData()]
 }]
}

Il est maintenant temps d'écrire le code pour supprimer et ajouter des barres à notre graphique. Au début, nous avons initialisé la valeur d'index à 11 et j'ai utilisé deux méthodes : removeData() et addData(valuesArray,label). L’appel de la méthode removeData() de l’instance supprime la première valeur de tous les ensembles de données du graphique. Dans l'exemple barChartDemo, la première valeur de l'ensemble de données est supprimée. L'appel de addData() transmet une valeur de tableau avec l'étiquette, ajoutant un nouveau nœud de données à la fin du graphique. L'extrait de code ci-dessous met à jour le graphique toutes les 3 secondes.

JavaScript

var index = 11;
var ctx = document.getElementById('canvas').getContext('2d');
var barDemo = new Chart(ctx).Bar(barData, {
 responsive: true
});
setInterval(function() {
 barDemo.removeData();
 barDemo.addData([dData()], 'dD ' + index);
 index++;
}, 3000);

Une autre façon de mettre à jour les valeurs du graphique consiste à définir les valeurs directement. Dans l'exemple ci-dessous, la première ligne définit la valeur de la deuxième barre du premier ensemble de données à 60. Si vous mettez à jour à ce stade, la barre animera sa valeur actuelle à 60.

JavaScript

barDemo.datasets[0].bars[2].value = 60;
barDemo.update();

这里是柱形图的示例（由SitePoint在CodePen上创建）：

See the Pen Chart.js Responsive Bar Chart Demo by SitePoint (@SitePoint) on CodePen.

结论

这个教程覆盖了关于 Chart.js 的一些重要功能。第一个例子展示了一些全局设置的使用，同时，Chart.js也为每个图表类型提供了专属的自定义设置。如果当前可用的图表无法满足你的需求，你还可以创造自己的图表类型。我推荐你浏览文档，加深关于该库什么可以做，什么无法做的认识。