Beherrschen von Recharts: Eine umfassende Anleitung zum Erstellen von Diagrammen in ReactJS

Wenn Sie mit ReactJS arbeiten und Daten mit Diagrammen zum Leben erwecken möchten, bietet Recharts eine großartige Möglichkeit, mit Leichtigkeit beeindruckende Visualisierungen zu erstellen. In diesem Leitfaden verwenden wir Recharts und Fakestore API, um Produktdaten abzurufen und in einem Balkendiagramm und einem Kreisdiagramm anzuzeigen.
Sie können sich auch das Github-Repository und die Live-Demo ansehen. Lasst uns anfangen!

?️ Setup: Beginnend mit Vite

Erstellen wir zunächst eine neue React-App mit Vite.

1. Installieren Sie Vite mit dem folgenden Befehl:

   npm create vite@latest

1. Folgen Sie den Anweisungen:

   • Projektname: Diagramme
   • Rahmen: Reagieren
   • Variante: JavaScript

2. Gehen Sie in Ihren Projektordner, installieren Sie Abhängigkeiten und starten Sie den Server:
   

   cd charts
   npm install
   npm run dev

Lassen Sie uns bei laufendem Projekt zwei Komponenten erstellen: eine für ein Produktpreis-Balkendiagramm und eine weitere für ein Produktkategorien-Kreisdiagramm.

? Schritt 1: Erstellen des Produktpreis-Balkendiagramms (ProductChart.jsx)

In dieser Komponente rufen wir Produktdaten von der API ab und visualisieren sie mit einem Balkendiagramm.

Code

Erstellen Sie eine Datei in src/components/ProductChart.jsx mit dem folgenden Code:

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

Erläuterung

• ResponsiveContainer: Macht das Diagramm reaktionsfähig, indem seine Breite auf 95 % und seine Höhe auf 450 Pixel festgelegt werden.
• BarChart: Die Hauptkomponente, die das Balkendiagramm rendert.
• CartesianGrid: Fügt ein Hintergrundgitter zur besseren Lesbarkeit hinzu.
• X-Achse und Y-Achse: Richten Sie die Etiketten für Produkt-ID und Preis ein.
• Tooltip: Zeigt Daten an, wenn Sie mit der Maus über die Balken fahren.
• Balken: Rendert die Balken, wobei jeder Balken einen Produktpreis darstellt.

? Schritt 2: Erstellen des Produktkategorien-Kreisdiagramms (CategoryChart.jsx)

In dieser Komponente rufen wir Produktdaten ab, zählen die Produkte in jeder Kategorie und visualisieren sie mithilfe eines Kreisdiagramms.

Code

Erstellen Sie eine Datei in src/components/CategoryChart.jsx mit dem folgenden Code:

   npm create vite@latest

Erläuterung

• categoryCount-Methode: Zählt die Anzahl der Produkte in jeder Kategorie und formatiert das Ergebnis für die Anzeige im Kreisdiagramm.
• PieChart & Pie: Die Hauptkomponenten, die das Kreisdiagramm rendern.
• Zelle: Fügt jedem Kreisstück Farbe hinzu, definiert durch das COLORS-Array.
• cx, cy und äußererRadius: Positionieren und skalieren Sie das Kreisdiagramm innerhalb des Containers.

?️ Schritt 3: Komponenten in App.js rendern

Um Ihre Diagramme in Aktion zu sehen, müssen Sie diese Komponenten in App.js rendern.

Code

Aktualisieren Sie src/App.js wie folgt:

   cd charts
   npm install
   npm run dev

Damit sollten Sie sowohl das Balkendiagramm als auch das Kreisdiagramm auf Ihrem Bildschirm sehen!

---

? Abschluss

Herzlichen Glückwunsch! Sie haben Recharts erfolgreich verwendet, um dynamische und reaktionsfähige Datenvisualisierungen in einer React-App zu erstellen. Wir haben Folgendes abgedeckt:

• Einrichten eines React-Projekts mit Vite
• Abrufen und Verarbeiten von Daten von der Fakestore API
• Erstellen von Balken- und Kreisdiagrammen mit Recharts

Recharts macht die Erstellung interaktiver Visualisierungen einfach und anpassbar. Experimentieren Sie mit anderen Diagrammtypen und Datenquellen, um noch ansprechendere Visualisierungen zu erstellen!

Das obige ist der detaillierte Inhalt vonBeherrschen von Recharts: Eine umfassende Anleitung zum Erstellen von Diagrammen in ReactJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!