Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

Les graphiques offrent à vos utilisateurs un moyen pratique et attrayant de visualiser les données. Ils peuvent faciliter la compréhension des données et rendre votre application plus interactive.

Il existe plusieurs façons de créer des graphiques dans React, notamment en utilisant un CSS de base ou une bibliothèque comme React-Vis ou React Google Charts.

Comment créer des graphiques en réaction avec CSS

Créer des graphiques dans React à l'aide de CSS de base est relativement facile. Tout ce que vous avez à faire est de créer un élément div avec une largeur et une hauteur, puis de définir la couleur d'arrière-plan sur la couleur souhaitée du graphique. Par exemple:

importer Réagir depuis'réagir';
constante Graphique = () => {
retour (


largeur: '100px', hauteur: '300px', Couleur de l'arrière plan: '#5D6AFF'}}/>
 );
}
exporterdéfaut Graphique;
instagram viewer

Dans le code ci-dessus, nous avons importé la bibliothèque React. Nous avons ensuite créé une fonction appelée Chart qui renvoie un div avec une largeur de 100px, une hauteur de 300px et une couleur d'arrière-plan de #5D6AFF. Cela créera un graphique de base avec un fond bleu. Vous pouvez aussi utiliser l'interface utilisateur matérielle ou Tailwind CSS dans votre application React pour créer des graphiques.

Vous pouvez également créer plusieurs graphiques avec du texte ou des images à l'intérieur des divs pour créer des graphiques plus complexes.

importer Réagir depuis'réagir';
constante Graphique = () => {
retour (
<div>


largeur: '100px', hauteur: '300px', Couleur de l'arrière plan: '#5D6AFF'}}>
<p>Graphique 1p>
div>
largeur: '100px', hauteur: '300px', Couleur de l'arrière plan: '#FFCF00'}}>
<imagesrc=" https://dummyimage.com/40x80/000/0011ff"style={{rembourrage:'100px30px'}} />
div>
div>
 );
}


exporterdéfaut Graphique;

React Charts à l'aide de la bibliothèque React-Vis

React-Vis est une bibliothèque créée par Uber qui vous permet de créer des tableaux et des graphiques dans React. Il fournit un ensemble de composants qui facilitent la création de graphiques avec différentes formes, couleurs et tailles. Il prend également en charge les animations et l'interactivité, ce qui peut rendre vos graphiques plus attrayants.

Pour utiliser React-Vis, vous devez d'abord créer une application React de base et installez la bibliothèque. Vous pouvez le faire avec la commande suivante :

npm installer réagir vis-à-vis

Une fois que vous avez installé la bibliothèque, vous pouvez créer un graphique de base avec le code suivant :

importer Réagissez, { useState } depuis'réagir';
importer {
 XYPlot,
 LigneSérie,
 Lignes de grille verticales,
 Lignes de grille horizontales,
 Axe X,
 Axe Y
} depuis'réagir-vis';


constante Graphique = () => {
constante [données] = useState([
 { X: 0, y: 8 },
 { X: 1, y: 5 },
 { X: 2, y: 4 },
 { X: 3, y: 9 },
 { X: 4, y: 1 },
 { X: 5, y: 7 },
 { X: 6, y: 6 },
 { X: 7, y: 3 },
 { X: 8, y: 2 },
 { X: 9, y: 0 }
 ]);


retour (
<XYPlotlargeur={300}hauteur={300}>
<Lignes de grille verticales />
<Lignes de grille horizontales />
<Axe X />
<Axe Y />
<LigneSériedonnées={données} />
XYPlot>
 );
}
exporterdéfaut Graphique;

Le code ci-dessus importe les bibliothèques React et React-Vis. Il définit ensuite une fonction appelée Chart qui renvoie un XYPlot avec VerticalGridLines, HorizontalGridLines, XAxis, YAxis et une LineSeries. Le LineSeries prend le tableau de données, qui contient les coordonnées x et y des points qui composent la ligne.

Utilisation de la bibliothèque React Google Charts

React Google Charts est une autre bibliothèque qui facilite la création de graphiques dans React. Il fournit un ensemble de composants pour créer différents types de graphiques, tels que des graphiques à barres, des graphiques à secteurs et des graphiques linéaires. Il prend également en charge les animations et l'interactivité, ce qui peut rendre vos graphiques plus attrayants.

Pour utiliser React Google Charts, vous devez d'abord installer la bibliothèque. Vous pouvez le faire avec la commande suivante :

npm installer réagir-google-charts

Une fois que vous avez installé la bibliothèque, vous pouvez créer un graphique de base avec le code suivant :

importer Réagissez, { useState } depuis'réagir';
importer { Graphique } depuis'réagir-google-charts';
constante MonGraphique = () => {
constante [données] = useState([
['Année', 'Ventes', 'Dépenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
 ]);


retour (
 largeur={'400px'}
 hauteur={'300px'}
 TypeGraphique="Bar"
 données={données}
 />
 );
}
exporterdéfaut MonGraphique ;

Ce code importe les bibliothèques react et react-google-charts. Il crée ensuite une fonction appelée MyChart qui renvoie un composant Chart. Le composant Chart prend le tableau de données, qui contient les étiquettes et les valeurs des points qui composent le graphique.

Inconvénients de l'utilisation de CSS

L'utilisation de CSS pour créer des graphiques dans React présente quelques inconvénients :

  • Difficile à utiliser: Si vous souhaitez créer des graphiques complexes, CSS peut être difficile à utiliser.
  • Pas très souple : Le CSS n'est pas très flexible, il peut donc être difficile d'apporter des modifications à vos graphiques.
  • Non interactif : Les graphiques CSS ne sont pas interactifs, vos utilisateurs ne pourront donc pas interagir avec eux.

Si vous souhaitez créer des graphiques complexes, React-vis et React-google-charts sont de meilleurs choix. Cependant, si vous souhaitez créer des graphiques simples, CSS peut être une bonne option.

Avantages de l'utilisation de React-Vis

L'utilisation de React-Vis pour créer des graphiques dans React présente plusieurs avantages :

  • Facile à utiliser: React-Vis est facile à utiliser, vous pouvez donc créer facilement des graphiques complexes.
  • Très flexible : React-Vis est très flexible, vous pouvez donc facilement apporter des modifications à vos graphiques.
  • Interactif: Les graphiques React-Vis sont interactifs, vos utilisateurs peuvent donc interagir avec eux.
  • Animé: Les graphiques React-Vis prennent en charge les animations, ce qui vous permet de rendre vos graphiques plus attrayants.

Si vous souhaitez créer des graphiques complexes, interactifs et animés, React-Vis est un bon choix.

Avantages de l'utilisation de React Google Charts

Tout comme React-Vis, l'utilisation de React Google Charts pour créer des graphiques dans React présente plusieurs avantages :

  • Facile à utiliser: React Google Charts est facile à utiliser, vous pouvez donc créer facilement des graphiques complexes.
  • Différents types de graphiques : React Google Charts propose différents types de graphiques, vous pouvez donc choisir celui qui convient le mieux à vos données.
  • Prise en charge des animations: Réagissez Google Charts prend en charge les animations, vous pouvez donc rendre vos graphiques plus attrayants.

Augmentez l'engagement des utilisateurs avec les graphiques

Les graphiques sont un excellent moyen de visualiser les données, mais vous pouvez également les utiliser pour augmenter l'engagement des utilisateurs. L'ajout d'animations et d'interactivité à vos graphiques peut les rendre plus attrayants et aider vos utilisateurs à mieux comprendre vos données.

Donc, si vous cherchez un moyen d'augmenter l'engagement des utilisateurs dans votre application React, pensez à ajouter des graphiques. Vous pouvez également déployer votre application React sur une plateforme rapide, sécurisée et évolutive comme Github.