Maîtriser les Recharts : un guide complet pour créer des graphiques dans ReactJS

Si vous travaillez avec ReactJS et souhaitez donner vie aux données avec des graphiques, Recharts offre un excellent moyen de créer facilement des visualisations époustouflantes. Dans ce guide, nous utiliserons Recharts et API Fakestore pour récupérer et afficher les données produit dans un graphique à barres et un diagramme circulaire.
Vous pouvez également consulter le référentiel github et la démo en direct. Commençons !

?️ Configuration : Commencer avec Vite

Tout d'abord, créons une nouvelle application React à l'aide de Vite.

1. Installez Vite avec la commande suivante :

   npm create vite@latest

1. Suivez les instructions :

   • Nom du projet : graphiques
   • Cadre : Réagissez
   • Variante : JavaScript

2. Déplacez-vous vers le dossier de votre projet, installez les dépendances et démarrez le serveur :
   

   cd charts
   npm install
   npm run dev

Une fois votre projet en cours d'exécution, créons deux composants : un pour un graphique à barres des prix des produits et un autre pour un diagramme circulaire des catégories de produits.

? Étape 1 : Création du graphique à barres des prix du produit (ProductChart.jsx)

Dans ce composant, nous allons récupérer les données produit de l'API et les visualiser avec un graphique à barres.

Code

Créez un fichier dans src/components/ProductChart.jsx avec le code suivant :

// src/components/ProductChart.jsx
import React from 'react';
import axios from 'axios';
import { useState, useEffect } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

export default function ProductChart() {
  const [products, setProducts] = useState([]);

  const fetchData = async () => {
    try {
      const response = await axios.get('https://fakestoreapi.com/products');
      setProducts(response.data);
    } catch (err) {
      console.log(err);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  // Prepare data for chart
  const chartData = products.map(item => ({
    name: item.id,
    price: item.price,
  }));

  return (
    <>
      <div className='product'>
        <h3 className='product-heading'>PRODUCT PRICE BAR CHART</h3>
        <ResponsiveContainer width='95%' height={450}>
          <BarChart 
            data={chartData}
            margin={{
              top: 5,
              right: 30,
              left: 20,
              bottom: 20,
            }}
          >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" label={{ value: "Product ID", position: "bottom", offset: -5 }}  />
            <YAxis label={{ value: "Price", angle: -90, position: "insideLeft", offset: -10 }} />
            <Tooltip />
            <Bar dataKey="price" fill="#eca1ac" />
          </BarChart>
        </ResponsiveContainer>
      </div>
    </>
  );
}

Explication

• ResponsiveContainer : rend le graphique réactif en définissant sa largeur à 95 % et sa hauteur à 450 px.
• BarChart : le composant principal qui restitue le graphique à barres.
• CartesianGrid : Ajoute une grille d'arrière-plan pour plus de lisibilité.
• XAxis & YAxis : configurez les étiquettes pour l'ID du produit et le prix.
• Info-bulle : affiche les données lorsque vous survolez les barres.
• Bar : affiche les barres, chaque barre représentant le prix d'un produit.

? Étape 2 : Création du diagramme circulaire des catégories de produits (CategoryChart.jsx)

Dans ce composant, nous allons récupérer les données sur les produits, compter les produits dans chaque catégorie et les visualiser à l'aide d'un diagramme circulaire.

Code

Créez un fichier dans src/components/CategoryChart.jsx avec le code suivant :

   npm create vite@latest

Explication

• MéthodecategoryCount : compte le nombre de produits dans chaque catégorie et formate le résultat pour l'afficher dans le diagramme circulaire.
• PieChart & Pie : Les principaux composants qui restituent le diagramme circulaire.
• Cellule : ajoute de la couleur à chaque tranche de tarte, définie par le tableau COULEURS.
• cx, cy et externalRadius : positionnez et dimensionnez le diagramme circulaire dans le conteneur.

?️ Étape 3 : Rendu des composants dans App.js

Pour voir vos graphiques en action, vous devez restituer ces composants dans App.js.

Code

Mettez à jour src/App.js comme suit :

   cd charts
   npm install
   npm run dev

Une fois cela en place, vous devriez voir à la fois le graphique à barres et le graphique circulaire sur votre écran !

---

? Conclusion

Félicitations ! Vous avez utilisé avec succès Recharts pour créer des visualisations de données dynamiques et réactives dans une application React. Nous avons couvert :

• Mise en place d'un projet React avec Vite
• Récupération et traitement des données de l'API Fakestore
• Création de graphiques à barres et à secteurs à l'aide de Recharts

Recharts rend la création de visualisations interactives simple et personnalisable. Expérimentez avec d'autres types de graphiques et sources de données pour créer des visualisations encore plus attrayantes !

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!