Menguasai Carta Semula: Panduan Komprehensif untuk Mencipta Carta dalam ReactJS

Jika anda bekerja dengan ReactJS dan ingin menghidupkan data dengan carta, Recharts menawarkan cara terbaik untuk mencipta visualisasi yang menakjubkan dengan mudah. Dalam panduan ini, kami akan menggunakan Recharts dan Fakestore API untuk mengambil dan memaparkan data produk dalam carta bar dan carta pai.
Anda juga boleh menyemak repositori github dan demo langsung. Mari mulakan!

?️ Persediaan: Bermula dengan Vite

Mula-mula, mari buat apl React baharu menggunakan Vite.

1. Pasang Vite dengan arahan berikut:

   npm create vite@latest

1. Ikuti gesaan:

   • Nama projek: carta
   • Kerangka: Bertindak balas
   • Varian: JavaScript

2. Alih ke folder projek anda, pasang kebergantungan dan mulakan pelayan:
   

   cd charts
   npm install
   npm run dev

Dengan projek anda berjalan, mari buat dua komponen: satu untuk Carta Bar Harga Produk dan satu lagi untuk Carta Pai Kategori Produk.

? Langkah 1: Mencipta Carta Bar Harga Produk (ProductChart.jsx)

Dalam komponen ini, kami akan mengambil data produk daripada API dan menggambarkannya dengan carta bar.

Kod

Buat fail dalam src/components/ProductChart.jsx dengan kod berikut:

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

Penjelasan

• ResponsiveContainer: Menjadikan carta responsif dengan menetapkan lebarnya kepada 95% dan ketinggian kepada 450px.
• BarChart: Komponen utama yang memaparkan carta bar.
• CartesianGrid: Menambah grid latar belakang untuk kebolehbacaan.
• XAxis & YAxis: Sediakan label untuk ID produk dan harga.
• Petua alat: Menunjukkan data apabila melayang di atas bar.
• Bar: Memaparkan bar, dengan setiap bar mewakili harga produk.

? Langkah 2: Mencipta Carta Pai Kategori Produk (CategoryChart.jsx)

Dalam komponen ini, kami akan mengambil data produk, mengira produk dalam setiap kategori dan menggambarkannya menggunakan carta pai.

Kod

Buat fail dalam src/components/CategoryChart.jsx dengan kod berikut:

   npm create vite@latest

Penjelasan

• Kaedah Pengiraan kategori: Mengira bilangan produk dalam setiap kategori dan memformatkan hasil untuk paparan dalam carta pai.
• Carta Pai & Pai: Komponen utama yang menghasilkan carta pai.
• Sel: Menambah warna pada setiap kepingan pai, ditakrifkan oleh tatasusunan COLORS.
• cx, cy dan outerradius: Letakkan dan saiz carta pai dalam bekas.

?️ Langkah 3: Memaparkan Komponen dalam App.js

Untuk melihat carta anda dalam tindakan, anda perlu memaparkan komponen ini dalam App.js.

Kod

Kemas kini src/App.js seperti berikut:

   cd charts
   npm install
   npm run dev

Dengan adanya ini, anda seharusnya melihat kedua-dua carta bar dan carta pai pada skrin anda!

? Kesimpulan

Tahniah! Anda telah berjaya menggunakan Recharts untuk membuat visualisasi data dinamik dan responsif dalam apl React. Kami telah membincangkan:

• Menyediakan projek React dengan Vite
• Mengambil dan memproses data daripada API Fakestore
• Mencipta carta bar dan pai menggunakan Recharts

Carta semula menjadikan membina visualisasi interaktif mudah dan boleh disesuaikan. Eksperimen dengan jenis carta dan sumber data lain untuk mencipta visualisasi yang lebih menarik!

Atas ialah kandungan terperinci Menguasai Carta Semula: Panduan Komprehensif untuk Mencipta Carta dalam ReactJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!