Réunion Plus de types de graphiques : Bulle, Bulle emballée, Graphique de flux et Cylindre | de Jennifer Fu | décembre 2022

Plus d’exemples Highcharts dans React

Highcharts est une bibliothèque graphique JavaScript de niveau entreprise basée sur SVG. Il est accompagné d’une excellente documentation et d’innombrables exemples. Le seul inconvénient est que la licence est propriétaire. Il est gratuit pour les utilisations personnelles/non commerciales, mais vous devez payer pour les applications commerciales.

Dans un article précédentnous avons introduit Highcharts et 12 types de graphiques de line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemapet gauge.

Dans cet article, nous avons créé un environnement de travail pour explorer Highcharts à l’aide de Create React App. Nous continuons à utiliser l’environnement pour tester d’autres types de graphiques bubble, packedbubble, streamgraphet cylinder.

Comme nous l’avons expliqué dans cet article, il est recommandé d’inclure les importations suivantes pour chaque graphique :

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import _ from 'lodash';
import HighchartsExporting from 'highcharts/modules/exporting';
import HighchartsAccessibility from 'highcharts/modules/accessibility';

• highcharts: Il s’agit de la bibliothèque de graphiques JavaScript.
• highcharts-react-official: Il s’agit du wrapper officiel pris en charge par Highcharts pour React.
• lodash: Il s’agit d’une bibliothèque d’utilitaires JavaScript moderne offrant modularité, performances et extras. Comme lodash est livré avec l’application Create Reactnous utilisons commodément sa fonction, _.startCasepour mettre chaque lettre initiale en majuscule.
• highcharts/modules/exporting: C’est le module d’exportation Highcharts qui fournit un menu avec des éléments de menu liés à l’exportation pour View in full screen, Print chart, Download PNG image, Download JPEG image, Download PDF documentet Download SVG vector image.
• highcharts/modules/accessibility: C’est le module d’accessibilité Highcharts qui fournit l’accessibilité pour le graphique HTML généré.

UNE graphique à bulles est un type de graphique qui affiche trois dimensions de données. Chaque entité est codée en [x, y, z] format, où [x, y] précise l’emplacement, et z est la taille.

Voici la modification src/App.js:

• Aux lignes 6 et 9, highcharts/highcharts-more est chargé, ce qui est nécessaire pour le graphique à bulles.
• Aux lignes 12 à 16, le graphique type, widthet height sont définis.
• Aux lignes 17 à 19, le titre du graphique est composé à partir du type.
• Aux lignes 20 à 24, yAxis est configuré avec un title.
• Aux lignes 25 à 35, series définit trois ensembles de points de données (lignes 26 à 28, lignes 29 à 31 et lignes 32 à 34).
• Aux lignes 36 à 38, les crédits par défaut ont été désactivés.
• À la ligne 43, le graphique à bulles est créé.

Exécuter yarn startet nous voyons un graphique à bulles.

UNE graphique à bulles emballé est un type de graphique à bulles, avec son emplacement, [x, y], étant automatiquement calculé pour emballer les bulles dans un cluster. Au lieu du format, [x, y, z]le graphique à bulles compressé n’a besoin que de z valeur pour la taille. Il utilise la taille et, éventuellement, la couleur pour visualiser les données.

Voici la modification src/App.js:

• Aux lignes 6 et 9, highcharts/highcharts-more est chargé, ce qui est requis pour le graphique à bulles compacté.
• Aux lignes 12 à 16, le graphique type, widthet height sont définis.
• Aux lignes 17 à 19, le titre du graphique est composé à partir du type.
• Aux lignes 20 à 29, la taille de bulle minimale est configurée pour être de 30 % et la taille de bulle maximale est configurée pour être de 100 %. Les étiquettes de données sont activées et le nom du point formate chaque étiquette.
• Aux lignes 30 à 111, series définit quatre ensembles de points de données, A (lignes 33 à 50), B (lignes 54 à 75), C (lignes 79 à 92), et D (lignes 96 à 109).
• Aux lignes 112 à 114, les crédits par défaut ont été désactivés.
• À la ligne 119, le graphique à bulles compacté est créé.

Exécuter yarn startet nous voyons un graphique à bulles compact.

Le graphique à bulles compressé a une capacité de glisser-déposer, permettant à un utilisateur de déplacer une bulle sélectionnée entre les séries pour vérifier comment leurs relations changent avec le déplacement.

UNE graphique de flux est un graphique en aires empilées déplacé autour d’un axe central, ce qui donne une forme fluide et organique. Il est souvent utilisé pour afficher des volumes composés dans différentes catégories ou dans le temps.

Voici la modification src/App.js:

• Aux lignes 6 et 9, highcharts/modules/streamgraph est chargé, ce qui est requis pour le diagramme de graphe de flux.
• Aux lignes 12 à 16, le graphique type, widthet height sont définis.
• Aux lignes 17 à 19, le titre du graphique est composé du type.
• Aux lignes 20 à 22, xAxis est défini comme étant six catégories.
• Aux lignes 23 à 40, series définit quatre ensembles de volumes pour ces catégories, Group 1 (lignes 24 à 27), Group 2 (lignes 28 à 31), Group 3 (lignes 32 à 35), et Group 4 (lignes 36 à 39).
• Aux lignes 41 à 43, les crédits par défaut ont été désactivés.
• À la ligne 48, le diagramme de graphe de flux est créé.

Exécuter yarn startet nous voyons un graphique de flux.

Pour les mêmes options, changez le type en area:

<HighchartsReact highcharts={Highcharts} options={getOptions('area')} />

Exécuter yarn startet nous voyons un graphique en aires.

Ajouter plotOptions pour les empiler :

plotOptions: {
area: {
stacking: 'normal',
},
}

Exécuter yarn startet nous voyons un graphique en aires empilées.

Changez le type en areaspline:

plotOptions: {
areaspline: {
stacking: 'normal',
},
}
...
function App() {
return (
<HighchartsReact highcharts={Highcharts} options={getOptions('areaspline')} />
);
}

Exécuter yarn startet nous voyons un graphique arespline.

Ressemble-t-il au graphique de flux ?

Le graphique en flux s’affiche autour d’un axe central, tandis que le graphique en aires empilées s’affiche le long xAxis. Sinon, ils sont similaires.

UNE Diagramme de cylindres 3D est une variante d’un histogramme 3D et comporte des points cylindriques.

Voici la modification src/App.js:

• Aux lignes 4 et 8, highcharts/highcharts-3d est chargé, car le diagramme cylindrique est un diagramme 3D.
• Aux lignes 7 et 11, highcharts/modules/cylinder est chargé, ce qui est nécessaire pour le diagramme de cylindres.
• Aux lignes 14 à 18, le graphique type, widthet height sont définis.
• Aux lignes 19 à 21, le titre du graphique est composé à partir du type.
• Aux lignes 22 à 24, xAxis est défini comme étant six catégories.
• Aux lignes 25 à 42, series définit quatre ensembles de volumes pour ces catégories, Group 1 (lignes 26 à 29), Group 2 (lignes 30 à 33), Group 3 (lignes 34 à 37), et Group 4 (lignes 38 à 41).
• Aux lignes 43 à 45, les crédits par défaut ont été désactivés.
• À la ligne 50, le diagramme cylindrique est créé.

Exécuter yarn startet nous voyons un diagramme en cylindre.

Si vous observez attentivement, les deux extrémités de chaque colonne semblent cylindriques. Voici la vue agrandie :

Changez le type en column:

function App() {
return (
<HighchartsReact highcharts={Highcharts} options={getOptions('column')} />
);
}

Exécuter yarn startet nous voyons un histogramme où les deux extrémités de chaque colonne sont bordées.

Lorsque vous regardez la vue 2D, les différences entre les diagrammes à cylindres et à colonnes sont mineures.

Ajouter options3d pour activer les cartes 3D et configurer les angles de rotation et la profondeur.

chart: {
type,
width: 800,
height: 600,
options3d: {
enabled: true,
alpha: 15,
beta: 30,
depth: 300,
},
}

Voici le diagramme des cylindres en vue 3D :

Voici l’histogramme en vue 3D :

Dans la vue 3D, les différences entre les diagrammes à cylindres et à colonnes sont évidentes.

Le cylindre a l’air cylindrique, mais nous voulons le rendre plus tridimensionnel. Nous plaçons des groupes à différentes profondeurs et posons des cylindres de différents diamètres (pointWidth).

Voici la modification src/App.js:

• Aux lignes 31 à 34, zAxis est configuré avec min et max valeurs.
• Aux lignes 36 à 41, Group 1 ensembles depth vaut 0, et pointWidth avoir 30 ans.
• Aux lignes 42–47, Group 2 ensembles depth être 100, et pointWidth avoir 20 ans.
• Aux lignes 48–53, Group 3 ensembles depth être 200, et pointWidth avoir 20 ans.
• Aux lignes 54 à 59, Group 4 ensembles depth être 300, et pointWidth avoir 50 ans.

Exécuter yarn startet le diagramme en cylindre 3D est très tridimensionnel.

Changez le type en column:

function App() {
return (
<HighchartsReact highcharts={Highcharts} options={getOptions('column')} />
);
}

L’histogramme 3D est également très tridimensionnel, et il illustre la profondeur plus clairement.

Highcharts est une bibliothèque de graphiques JavaScript de niveau entreprise basée sur SVG. Il est accompagné d’une excellente documentation et d’innombrables exemples.

Dans un article précédentnous avons introduit Highcharts et 12 types de graphiques de line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemapet gauge.

Dans cet article, nous avons introduit des types de graphiques supplémentaires de bubble, packedbubble, streamgraphet cylinder.

Highcharts est gratuit pour les utilisations personnelles/non commerciales, mais vous devez payer pour les applications commerciales. Si votre budget le permet, Highcharts est fortement recommandé.

Merci d’avoir lu.

Want to Connect? 
If you are interested, check out my directory of web development articles.