Introduction

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. 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édent , nous avons présenté Highcharts et 12 types de graphiques de line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemap, et 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 essayer 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-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 fourni avec l'application Create React , nous utilisons commodément sa fonction, _.startCasepour mettre chaque lettre initiale en majuscule.
• highcharts/modules/exporting: Il s'agit du module d'exportation Highcharts qui fournit un menu avec des éléments de menu liés à l'exportation vers View in full screen, Print chart, Download PNG image, Download JPEG image, Download PDF document, et 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é.

Un 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]spécifie l'emplacement et zest la taille.

Voici le modifié src/App.js:

• Aux lignes 6 et 9, highcharts/highcharts-moreest chargé, ce qui est nécessaire pour le graphique à bulles.
• typeAux lignes 12 à 16, les , widthet du graphique heightsont définis.
• Aux lignes 17 à 19, le titre du graphique est composé à partir du type.
• Aux lignes 20 à 24, yAxisest configuré avec un title.
• Aux lignes 25 à 35, seriesdé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éé.

Le graphique à bulles condensé

Un graphique à bulles condensé est un type de graphique à bulles dont l'emplacement, [x, y], est calculé automatiquement pour regrouper les bulles dans un cluster. Au lieu du format , [x, y, z]le graphique à bulles compressé n'a besoin que de la zvaleur de la taille. Il utilise la taille et, éventuellement, la couleur pour visualiser les données.

Voici le modifié src/App.js:

• Aux lignes 6 et 9, highcharts/highcharts-moreest chargé, ce qui est nécessaire pour le graphique à bulles compacté.
• typeAux lignes 12 à 16, les , widthet du graphique heightsont 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, seriesdé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éé.

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.

Le graphique de flux et les graphiques en aires

Un graphique en 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 le modifié src/App.js:

• Aux lignes 6 et 9, highcharts/modules/streamgraphest chargé, ce qui est nécessaire pour le diagramme de graphe de flux.
• typeAux lignes 12 à 16, les , widthet du graphique heightsont définis.
• Aux lignes 17 à 19, le titre du graphique est composé du type.
• Aux lignes 20 à 22, xAxisest défini comme étant six catégories.
• Aux lignes 23 à 40, seriesdé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éé.

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

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

Ajoutez plotOptionspour les empiler :

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

Changez le type en areaspline:

plotOptions: {
  areaspline: {
    stacking: 'normal',
  },
}
...

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

Ressemble-t-il au graphique de flux ?

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

Les diagrammes à cylindres et à colonnes

Un diagramme cylindrique 3D est une variante d'un diagramme à colonnes 3D et comporte des points cylindriques.

Voici le modifié src/App.js:

• Aux lignes 4 et 8, highcharts/highcharts-3dest chargé, car le diagramme cylindrique est un diagramme 3D.
• Aux lignes 7 et 11, highcharts/modules/cylinderest chargé, ce qui est nécessaire pour le diagramme des cylindres.
• typeAux lignes 14 à 18, les , widthet du graphique heightsont définis.
• Aux lignes 19 à 21, le titre du graphique est composé à partir du type.
• Aux lignes 22 à 24, xAxisest défini comme étant six catégories.
• Aux lignes 25 à 42, seriesdé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éé.

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')} />
  );
}

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

Ajoutez options3dpour activer les graphiques 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 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 le modifié src/App.js:

• Aux lignes 31 à 34, zAxisest configuré avec les valeurs minet max.
• Aux lignes 36 à 41, Group 1définit depthà 0 et pointWidthà 30.
• Aux lignes 42 à 47, Group 2définit depthà 100 et pointWidthà 20.
• Aux lignes 48 à 53, Group 3définit depthà 200 et pointWidthà 20.
• Aux lignes 54 à 59, Group 4définit depthà 300 et pointWidthà 50.

Changez le type en column:

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

Conclusion

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 cet article, nous avons introduit des types de graphiques supplémentaires de bubble, packedbubble, streamgraphet cylinder.

Nous avons également écrit des articles sur d'autres types de Highcharts :

• Dans cet article : line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemap, et gauge.
• Dans cet article : sankeydiagram, arcdiagram, dependencywheel, et networkgraph.
• Dans cet article : parallelCoordinates.

Merci d'avoir lu.

Want to Connect? 

If you are interested, check out my directory of web development articles.