Créer des graphiques interactifs à l'aide de Plotly.js, partie 1: Démarrage

Dans la série intitulée Démarrage avec chart.js, vous avez appris à utiliser Chart.js pour créer facilement des graphiques basés sur la toile réactifs. La série a couvert sept types de graphiques de base offerts par la bibliothèque. Cependant, vous devrez peut-être créer des graphiques plus complexes avec des fonctionnalités supplémentaires pour rendre ces graphiques interactifs.

L'une des meilleures bibliothèques gratuites pour créer une variété de graphiques réactifs, interactifs et riches en fonctionnalités est intrigue.js. Dans cette série, vous apprendrez à créer différents types de graphiques à l'aide de Plotly.js, y compris des graphiques de ligne, des graphiques à barres, des graphiques de bulles et des graphiques de tracé DOT.

Pourquoi utiliser Plotly.js?

Plotly.js offre de nombreuses fonctionnalités qui font l'apprentissage de l'effort. Il s'agit d'une bibliothèque déclarative de haut niveau construite au-dessus de D3.js et Stack.gl. Voici une liste de fonctionnalités qui font de Plotly l'une des meilleures bibliothèques de cartographie JavaScript:

• Vous pouvez créer des graphiques interactifs avec facilité en utilisant Plotly.js. Tout graphique que vous créez avec la bibliothèque est équipé de fonctionnalités telles que le zoom dans, le zoom arrière, le panoramique, la mise à l'échelle automatique, etc. Ces fonctionnalités sont très utiles lorsque vous souhaitez étudier les graphiques avec un grand nombre de points tracés. Tous ces événements sont exposés dans l'API, vous pouvez donc écrire du code personnalisé pour effectuer vos propres actions lorsque l'un de ces événements est déclenché.
• Haute performance Lorsque vous tracez beaucoup de points fait de l'intrigue.js Un excellent choix chaque fois que vous devez tracer une grande quantité de données. Étant donné que la plupart des graphiques sont créés à l'aide de SVG, vous obtenez une quantité décente de compatibilité entre les navigateurs et la possibilité d'exporter des images de haute qualité de n'importe quel graphique. Cependant, le dessin d'un grand nombre d'éléments SVG dans le DOM peut nuire aux performances. La bibliothèque utilise Stack.gl pour créer des graphiques 2D et 3D haute performance.
• Tous les graphiques 3D que vous créez sont rendus à l'aide de WebGL pour profiter pleinement de tous les pouvoir que le GPU a à offrir.
• Tous les graphiques GPU. Tout, des couleurs et des étiquettes aux lignes et légendes de la grille, peut être personnalisée à l'aide d'un ensemble d'attributs JSON. Vous apprendrez à personnaliser différents types de graphiques dans les trois prochaines parties de la série.

Installation de Plotly

Avant de commencer à utiliser Plotly.js, nous devons l'installer d'abord. Il existe de nombreuses façons d'installer la bibliothèque.

La première option consiste à effectuer l'installation à l'aide de npm en exécutant la commande suivante:

npm install plotly.js<br>

Cette option est probablement la plus élégante et la plus flexible. Cependant, vous devrez configurer un bundler, qui transforme automatiquement les packages NPM que vous utilisez en quelque chose que le navigateur peut traiter. De plus, afin d'utiliser réellement le package, vous souhaitez probablement utiliser ESM. Vous pouvez en savoir plus sur ESM ici.

Si vous voulez une solution rapide pour le prototypage, vous pouvez également utiliser le CDN Plotly.js et lier directement la bibliothèque:

npm install plotly.js<br>

Au moment de la rédaction de ce tutoriel, la dernière version de la bibliothèque est 2.14.0. La taille du fichier après avoir minimisé et comprimé la bibliothèque est de 1,1 Mo. La version non mini et non compressée a une taille de 3,5 Mo. Comme vous pouvez le voir, la longue liste des fonctionnalités offerte par cette bibliothèque a un prix.

À partir de la version 1.15, vous pouvez choisir parmi différents paquets partiels, dont chacun vous permet de créer des types de graphiques spécifiques. Il y a sept faisceaux différents: Basic, Cartésien, Geo, GL3D, GL2D, Mapbox, Finance et Strict. Vous pouvez obtenir le lien CDN pour ces faisceaux en utilisant la ligne suivante:

<script type="text/javascript" src="https://cdn.plot.ly/plotly-2.14.0.min.js"></script><br>

Alternativement, si vous utilisez NPM, vous pouvez installer un package pour ce bundle.

https://cdn.plot.ly/plotly-bundleName-2.14.0.min.js<br><br>// Therefore the basic bundle becomes:<br>https://cdn.plot.ly/plotly-basic-2.14.0.min.js<br><br>// and the cartesian bundle becomes:<br>https://cdn.plot.ly/plotly-cartesian-2.14.0.min.js<br>

Si vous avez seulement besoin de dessiner des graphiques à partir d'un seul bundle, vous pouvez utiliser cette méthode pour réduire considérablement la taille du fichier. Voici quelques informations supplémentaires sur chacun d'eux.

• Basic : Ce bundle contient les modules de trace Histogram2D , PIE , Scatterternary . La version compressée et minifiée de ce bundle a une taille de 238,2 kb.
• Geo : Ce bundle vous permet de créer différents types de graphiques liés à la carte en JavaScript. La version compressée et minifiée de ce bundle a une taille de 224,1 kb.
• GL3D : Ce bundle vous permet de créer différents types de cartes 3D en utilisant le dispersion <code>scatter, Satter3D <code>scatter3d, Surface <code>surface, et mesh3d <code>mesh3d trace modules de trace. La version compressée et minimifiée de ce bundle a une taille de 354 kb.
• GL2D : Ce bundle contient le disperser <code>scatter, ScatterGl <code>scattergl, PointCloud <code>pointcloud, HeatMapGl <code>heatmapgl, Contourgl <code>contourgl, et parcoord. Il a une taille de 362,9 kb après minification et compression. <code>parcoords
• mapbox : Ce bundle contient les modules de trace dispersor et dispersmapbox <code>scatter. La taille du fichier dans ce cas est de 328,6 kb. scattermapbox
• Finance : Le bundle financier peut être utilisé pour créer des séries chronologiques, des chandeliers et d'autres types de graphiques pour tracer des données financières. Ce module se compose de disperser , bar <code>scatter, histogram <code>bar, PIE <code>histogram, ohlc <code>pie, et Candlestick <code>ohlc trace modules. candlestick
• STRICT : Le bundle strict comprend tout ce que le bundle normal a, mais évite les constructeurs de fonctions strict. Ce bundle est 10% plus grand que le bundle standard, alors ne l'utilisez pas à moins que vous en ayez vraiment besoin.

En utilisant Plotly pour créer un graphique

Une fois que vous avez décidé sur les graphiques que vous souhaitez créer et charger le bundle approprié dans votre page Web, vous pouvez commencer à créer vos propres graphiques en utilisant Plotly.js. La première chose que vous devez faire est de créer un élément div <p> vide où le graphique doit être dessiné. <code>div

Ayez des données prêtes que vous souhaitez tracer sur le graphique. Dans cet exemple, j'utilise simplement des nombres aléatoires pour créer le graphique. Enfin, vous devez appeler la fonction plot() et leur fournir toutes les informations comme le conteneur div, les données et les options de mise en page. Voici le code pour créer un graphique de ligne très basique:

npm install plotly.js<br>

Tous les graphiques dans Plotly.js sont créés de manière déclarative à l'aide d'objets JSON. Chaque propriété du graphique, comme sa couleur et ses données, a un attribut JSON correspondant qui peut être utilisé pour personnaliser pleinement l'apparence et le comportement du graphique.

Les attributs peuvent être largement divisés en deux catégories. Le premier est appelé traces , qui sont des objets utilisés pour fournir des informations sur une seule série de données à tracer sur le graphique. La deuxième catégorie est Layout , qui fournit des attributs différents qui contrôlent tous les autres aspects du graphique comme son titre ou ses annotations. Différentes traces sont en outre classées par le type de graphique, et les attributs qui vous sont disponibles pour dessiner le graphique dépendront de la valeur de l'attribut Type .

Dans l'exemple ci-dessus, nous avons créé un objet traceA qui stocke le type de trace et les données que vous souhaitez tracer sur le graphique. La démo de codepe suivante montre le résultat final du code ci-dessus.

Comme vous pouvez le voir dans la démo, vous pouvez zoomer, zoom arrière ou automatiquement le graphique. Vous pouvez également télécharger le graphique en tant qu'image. Le graphique lui-même a l'air très professionnel avec ses lignes nettes.

Attributs de mise en page pour personnaliser les graphiques

Dans le reste des didacticiels de cette série, nous nous concentrerons sur les différents attributs liés à des types de graphiques spécifiques comme les graphiques de ligne et de barres. Avant de le faire, vous devez également avoir une connaissance de base des différents attributs de mise en page qui contrôlent les aspects communs à tous les types de graphiques comme la police, le titre, l'axe x, l'axe y, etc.

Vous pouvez spécifier une police globale qui devrait être utilisée lors de la création de traces et d'autres composants de mise en page comme les axes et le titre. Les options sont spécifiées à l'aide de l'objet font, et ces valeurs sont utilisées par défaut par tous les composants du graphique. Les touches color, size et family sont imbriquées à l'intérieur de la touche font. Vous pouvez les utiliser pour définir la couleur mondiale de la police, la taille mondiale de la police et la famille mondiale respectivement.

Chaque graphique a un attribut title qui peut être utilisé pour définir le titre pour le graphique actuel. Il donne à l'utilisateur quelques informations sur ce que vous tracez sur le graphique. Les propriétés de police pour le titre peuvent être spécifiées à l'aide de l'attribut titlefont. Tout comme l'attribut global font, les touches color, size et family imbriquées à l'intérieur de l'attribut titlefont peuvent être utilisées pour contrôler les propriétés liées à la police du titre.

Vous pouvez spécifier la largeur et la hauteur d'un graphique en pixels en utilisant les clés width et height. Vous pouvez également contrôler l'espacement autour du graphique ainsi que la zone de traçage à l'aide de différents attributs imbriqués sous la touche margin. Toutes les valeurs sont spécifiées dans les pixels.

La marge gauche est spécifiée à l'aide de l'attribut l, de la marge de droite à l'aide de l'attribut r, de la marge supérieure à l'aide de l'attribut t et de la marge inférieure à l'aide de l'attribut b. La zone de traçage et les lignes d'axe sont très proches les unes des autres par défaut. Vous pouvez ajouter de l'espace autour de la zone de traçage à l'aide de l'attribut pad imbriqué à l'intérieur de la touche margin. Le rembourrage est spécifié dans les pixels, et sa valeur par défaut est nulle.

Vous pouvez choisir vos propres couleurs pour l'arrière-plan de l'ensemble du graphique ainsi que la zone de traçage pour correspondre au thème de votre site Web. Ces deux couleurs sont définies sur le blanc par défaut, mais vous pouvez spécifier une valeur différente pour chacun d'eux en utilisant respectivement les touches paper_bgcolor et plot_bgcolor.

Vous pouvez également spécifier le titre et différentes propriétés de police pour tous les axes de votre graphique. Les propriétés de la police sont imbriquées à l'intérieur des clés de l'axe pour les axes respectifs. Vous avez également la capacité de contrôler indépendamment la couleur de base de l'axe et la couleur de la police utilisée pour son titre.

Parfois, les points tracés sur un graphique ne descend pas jusqu'à zéro. Dans de tels cas, les tiques créées par parcelle sur un axe ne s'étendent pas non plus à zéro. Cependant, si vous voulez que les tiques commencent toujours à partir de zéro, quelle que soit la plage de points tracée, vous pouvez utiliser l'attribut rangemode et définir sa valeur sur tozero.

Le code d'extrait de code suivant utilise certains des attributs que nous venons de discuter pour modifier l'apparence du tableau que nous avons créé dans la section précédente. Vous avez appris diverses fonctionnalités de la bibliothèque Plotly.js. J'ai également couvert l'installation et l'utilisation de la bibliothèque ainsi que différents attributs de mise en page pour personnaliser l'apparence des graphiques en fonction de vos besoins.

Ce message a été mis à jour avec les contributions de Jacob Jackson. Jacob est développeur Web, écrivain technique, pigiste et contributeur open-source.

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!