Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Exemple de code de création de graphiques React


Exemple de code de création de graphiques React


Voici quelques exemples de bibliothèques de graphiques React avec leurs fonctionnalités et exemples respectifs :

1. Réagissez Chartjs 2

- Caractéristiques : Différents types de graphiques comme les courbes, les barres, les secteurs, etc.
- Exemples :
- Graphique à barres verticales
- Graphique à barres horizontales
- Graphique à barres empilées
- Graphique à barres groupé
- Graphique de zone
- Graphique linéaire
- Graphique linéaire multiaxes
- Graphique circulaire
- Tableau des beignets
- Carte des zones polaires
- Carte radar
- Graphique à nuages ​​de points
- Graphique à bulles
- Graphique multitype
- Événements graphiques
- Réf. graphique
- Graphique de dégradé

2. Réagissez aux graphiques Google

- Caractéristiques : Différents types de graphiques comme les aires, les barres, les bulles, etc.
- Exemples :
- Graphique de zone
- Graphique à barres
- Graphique à bulles
- Calendrier
- Graphique en chandeliers
- Graphique à colonnes
- Graphique combiné
- Gantt
- Jauge
- Carte géographique
- Histogramme
- Graphique linéaire
- Organigramme
- Graphique circulaire
-Sankey
- Graphique à nuages ​​de points
- Graphique en aires échelonnées
- Tableau
- Chronologie
- Carte des arbres
- Arbre de mots
- Animations
- Éditeur de graphiques
- Contrôles
- Interactions
- Mise en page
- Feuille de calcul
- Barre d'outils

3. ApexCharts.js

- Caractéristiques : Différents types de graphiques comme les lignes, les colonnes, les barres, les secteurs, etc.
- Exemples : inclut le code source de tous les exemples pour gagner du temps de développement.

4. CanvasJS

- Caractéristiques : graphiques interactifs et réactifs avec animation, zoom, panoramique, événements, exportation, exploration et mises à jour en temps réel.
- Exemples :
- Graphiques linéaires
- Graphiques Spline et Step Line
- Graphiques de zone
- Graphiques de zone de spline, de zone empilée, de zone empilée 100, de zone de pas, de zone de plage et de zone de spline de plage
- Graphiques à colonnes
- Graphiques à barres
- Colonne empilée, colonne empilée à 100 %, colonne de plage, barre empilée, barre empilée à 100 %, barre de plage et graphiques en cascade
- Graphiques circulaires
- Graphiques de beignets / beignets
- Graphiques en entonnoir et pyramide
- Graphiques en chandeliers et OHLC
- Graphiques de dispersion et de bulles
- Graphiques en boîte et en moustaches
- Graphiques d'erreur et de ligne d'erreur
- Graphiques dynamiques
- Graphiques boursiers avec sélecteur de plage, navigateur et graphiques multiples

5. TanStack/react-charts

- Caractéristiques : Différents types de graphiques comme les lignes, les barres, les bulles, etc.
- Exemples : comprend des exemples de simple, ligne, barre, bulle, zone, styles personnalisés, info-bulles personnalisées, options d'axe, mode sombre, étincelant, pinceau, modes de regroupement, options d'info-bulle, et plus encore.

Ces bibliothèques fournissent de nombreux exemples et modèles pour vous aider à démarrer la création de graphiques dans votre application React. Vous pouvez choisir celui qui correspond le mieux à vos besoins en fonction des types de graphiques que vous souhaitez créer et du niveau de personnalisation dont vous avez besoin[1][2][3][4][5].

Citations :
[1] https://react-chartjs-2.js.org/examples/
[2] https://www.react-google-charts.com/examples
[3] https://apexcharts.com/react-chart-demos/
[4] https://canvasjs.com/react-charts/
[5] https://codesandbox.io/examples/package/react-charts