Charts fantaisie et réactifs avec graphique.js

Les données sont tout autour de nous. Alors que les moteurs de recherche et d'autres applications fonctionnent de manière le plus optimale avec la représentation de textes des données, les gens trouvent que les données représentées visuellement sont faciles à comprendre. Plus tôt cette année, SitePoint a publié l'article d'Aurelio présentant une introduction à Chart.js. Ce tutoriel fournira un récapitulatif rapide de cette introduction, suivi d'un aperçu plus profond des fonctionnalités de Chart.js.

Les plats clés

• Chart.js est une bibliothèque de cartographie réactive et légers basée sur le canevas HTML5 qui prend en charge six types de graphiques différents, chacun avec de nombreuses options de personnalisation. Il est modulaire, permettant aux développeurs d'inclure uniquement les types de graphiques dont ils ont besoin, en gardant la taille du fichier minimal.
• La bibliothèque permet une personnalisation approfondie des graphiques, y compris les conseils d'outils, l'animation et même la création de types de graphiques personnalisés. Cela inclut à la fois les paramètres globaux et les options spécifiques au graphique, avec la possibilité de rendre les graphiques réactifs en définissant l'option de configuration réactive sur true.
• Chart.js prend également en charge l'ajout dynamique et la suppression des données, ce qui les rend idéales pour les situations où les données changent au fil du temps, telles que les représentations boursières. Cela peut être réalisé grâce à des méthodes comme supprimeraa () et adddata (valeursaRray, étiquette), ou en définissant directement les valeurs dans un graphique.

Pour commencer

chart.js est une bibliothèque de cartographie réactive, flexible et légère basée sur la toile HTML5. La bibliothèque prend en charge six types de graphiques différents, chacun de ces types de graphiques venant avec une charge d'options de personnalisation. Si cela ne suffit pas, vous avez également la possibilité de créer vos propres types de graphiques personnalisés.

Les six types de graphiques de base dans Chart.js ne sont que de 11 Ko minifiés et gzip’d et la bibliothèque est modulaire afin que vous puissiez réduire davantage la taille de la demande du fichier en notamment le type de graphique dont vous avez réellement besoin. Vous trouverez ci-dessous le lien CDNJS pour l'inclure:

<span><script></script></span>

Options de configuration disponibles

chart.js vous permet de modifier presque tous les aspects de vos graphiques - des conseils d'outil à l'animation. Dans cette section, je modifierai quelques paramètres pour démontrer ce que Chart.js est capable de créer. Voici le HTML avec lequel nous allons commencer:

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

Pour la première démonstration, je vais créer un tableau de ligne. Il existe des options de base que vous devez définir pour que les graphiques aient un sens. Le graphique de ligne prévoit un tableau d'étiquettes et de jeux de données. Les étiquettes apparaissent sur l'axe x. J'ai rempli le graphique de ligne avec des données factices. Les données sont divisées en un tableau d'ensembles de données. Chaque ensemble de données a une couleur pour le remplissage, la ligne et les points.

J'ai réglé FillColor sur transparent dans ce cas. Si vous ne définissez pas de valeur de remplissage, il sera à la place sur noir ou gris. Il en va de même pour d'autres valeurs. Les couleurs sont définies en utilisant le format RGBA, RGB, HEX ou HSL, similaire à CSS.

<span><script src="https://img.php.cn/upload/article/000/000/000/174049952240765.jpg"></script></span>

Définition des options globales

J'ai inclus le code qui définit certaines valeurs globales. AnimationSteps détermine la durée de l'animation. Il existe de nombreuses autres options que vous pouvez modifier en fonction de vos besoins, tels que ScalelineColor et Scale Integersony. Je vous suggère de parcourir la documentation Chart.js pour voir ce que cette bibliothèque a à offrir.

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

Définition des options spécifiques du graphique

Outre les options globales, il existe des options de configuration disponibles pour les types de graphiques individuels. Je vais définir quelques-unes de ces options dans ce tableau de ligne pour vous donner une idée:

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

Les graphiques générés par chart.js ne sont pas sensibles par défaut. La définition de réalité à True (comme fait ci-dessus) les rend réactifs. Si vous avez besoin de rendre chaque graphique réactif, je vous recommande de définir ce monde à la place, comme ceci:

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

Ci-dessous, vous pouvez voir la démo du graphique de ligne:

Voir la démonstration du graphique de la ligne du stylo.

Ajout et supprimer les données dynamiquement

Parfois, vous devez afficher des données qui changent au fil du temps. Un exemple classique de ce scénario est le marché boursier. Dans cette section, je créerai un graphique à barres et je supprimerai dynamiquement ainsi que d'y ajouter des données. J'utiliserai des données aléatoires et j'ai décidé de représenter des données avec un graphique à barres dans ce cas. La plupart du code de cet exemple sera similaire à l'exemple précédent. Une fois que nous avons notre HTML (identique à l'exemple précédent), nous pouvons ajouter notre javascript.

Nous allons d'abord écrire du code pour remplir notre graphique avec des données factices. J'utilise une expression de fonction pour générer des valeurs aléatoires, puis la stocker dans une variable DDATA. Ces valeurs sont ensuite utilisées pour nous fournir des données aléatoires chaque fois que le besoin s'en fait sentir. Comme dans l'exemple précédent, je crée un tableau d'étiquettes et d'ensembles de données et je définis un remplissage arbitraire.

<span>var ctx = document.getElementById('canvas').getContext('2d');
</span><span>var lineDemo = new Chart(ctx).<span>Line</span>(lineData, {
</span>  <span>responsive: true,
</span>  <span>pointDotRadius: 10,
</span>  <span>bezierCurve: false,
</span>  <span>scaleShowVerticalLines: false,
</span>  <span>scaleGridLineColor: 'black'
</span><span>});</span>

Il est maintenant temps d'écrire le code qui supprime et ajoute des barres à notre graphique. Je commence par initialiser la variable d'index à une valeur de 11. J'utilise deux méthodes: supprimeraa () et addData (valeursArray, étiquette). L'appel supprimé supprime sur une instance de graphique supprime la première valeur pour tous les ensembles de données sur ce graphique particulier. En cas de barchartdemo, la première valeur de l'ensemble de données est supprimée. Appeler AddData () passer un tableau de valeurs avec des étiquettes ajoute un nouveau point de données à la fin du graphique. L'extrait de code ci-dessous met à jour le graphique toutes les 3 secondes.

<span>Chart.defaults.global.responsive = true;</span>

Une autre méthode pour mettre à jour les valeurs dans un graphique consiste à définir directement les valeurs. Dans l'exemple ci-dessous, la première ligne définit la valeur de la deuxième barre du premier ensemble de données sur 60. Si vous appelez la mise à jour à ce stade, la barre animera de sa valeur actuelle à 60.

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

Et voici la démo du graphique à barres:

Voir la démonstration du graphique à barres réactif de stylo par SitePoint (@SitePoint) sur codepen.

Conclusion

Ce tutoriel a couvert certaines fonctionnalités importantes de Chart.js. Le premier exemple a démontré l'utilisation de quelques paramètres globaux. Cependant, Chart.js fournit également des options de personnalisation spécifiques à un type de graphique. La bibliothèque vous permet de créer vos propres types de graphiques si les graphiques déjà disponibles ne répondent pas à vos besoins. Je vous recommande de passer par la documentation afin que vous puissiez bien comprendre ce que vous pouvez et ne pouvez pas faire avec cette bibliothèque.

Questions fréquemment posées (FAQ) sur les graphiques réactifs fantaisie avec graphique.js

Comment puis-je rendre mon graphique graphique. Cela permet au graphique de se redimensionner lorsque la taille de la fenêtre change. Vous pouvez le faire en ajoutant le code suivant à la configuration de votre graphique:

var myChart = new That (ctx, {
type: 'bar',
data: data,
Options: {
réactif: true
}
});
Ce code garantira que votre graphique ajuste sa taille chaque fois que la taille de la fenêtre change, garantissant un entièrement réactif conception.

Pourquoi mon graphique graphique. Un problème courant est que l'élément de toile contenant le graphique n'est pas redimensionné correctement. Assurez-vous que l'élément de toile a une position relative et une largeur et une hauteur de 100%. Un autre problème pourrait être que l'option réactive dans la configuration du graphique n'est pas définie sur true. Vérifiez la configuration de votre graphique pour vous assurer que l'option réactive est correctement définie.

Comment puis-je personnaliser l'apparence de mon graphique graphique.js?

Chart.js fournit une large gamme d'options pour personnaliser l'apparence de vos graphiques. Vous pouvez personnaliser les couleurs, les étiquettes, les info-bulles et bien plus encore. Par exemple, pour personnaliser la couleur des barres dans un graphique à barres, vous pouvez utiliser le code suivant:

var MyChart = nouveau graphique (ctx, {

type: 'bar',

data : {
ensembles de données: [{
backgroundColor: 'rgba (75, 192, 192, 0.2)'
}]
}
});
Ce code définira la couleur d'arrière-plan des barres sur une couleur bleu clair. Vous pouvez personnaliser de nombreux autres aspects de l'apparence du graphique en utilisant des options similaires.

Comment puis-je ajouter des info-bullets à mon graphique graphique.js?

Infilmans dans le graphique.js sont activés par défaut et apparaîtra lorsque vous survolerez les points de données sur le graphique. Vous pouvez personnaliser l'apparence et le comportement des info-bullets à l'aide de l'option de configuration des infractions. Par exemple, pour modifier la couleur d'arrière-plan des info-bullets, vous pouvez utiliser le code suivant:

var myChart = nouveau graphique (ctx, {
type: 'bar',
data: data,
Options: {
Info-toolsts: {
backgroundColor: 'rgba (0, 0, 0, 0.8)'
}
}
});
Ce code définira la couleur d'arrière-plan des infractions sur une couleur noire semi-transparente. Vous pouvez personnaliser de nombreux autres aspects des info-bullets à l'aide d'options similaires.

Comment puis-je ajouter des animations à mon graphique de graphique.js?

Chart.js offre une variété d'options pour ajouter des animations à vos graphiques . Vous pouvez contrôler la durée, la fonction d'assouplissement et d'autres aspects des animations à l'aide de l'option de configuration d'animation. Par exemple, pour animer le graphique avec une durée de 2000 millisecondes et une fonction d'assouplissement de «facilitebounce», vous pouvez utiliser le code suivant:

var myChart = nouveau graphique (ctx, {
type: ' Bar ',
Données: données,
Options: {
Animation: {
Durée: 2000,
Soulagement: 'facilitebounce'
}
}
});
Ce code animera le graphique avec un effet de rebond sur une durée de 2 secondes. Vous pouvez personnaliser de nombreux autres aspects des animations en utilisant des options similaires.

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!