Recharts 마스터하기: ReactJS에서 차트 생성을 위한 종합 가이드

ReactJS로 작업하고 차트로 데이터에 생기를 불어넣고 싶다면 Recharts를 사용하여 멋진 시각화를 쉽게 만들 수 있습니다. 이 가이드에서는 Recharts 및 Fakestore API를 사용하여 막대 차트와 원형 차트로 제품 데이터를 가져와 표시합니다.
github 저장소와 라이브 데모를 확인할 수도 있습니다. 시작해 보세요!

?️ 설정: Vite로 시작하기

먼저 Vite를 사용하여 새로운 React 앱을 만들어 보겠습니다.

1. 다음 명령을 사용하여 Vite를 설치합니다:

   npm create vite@latest

1. 안내를 따르세요.

   • 프로젝트 이름: 차트
   • 프레임워크: 반응
   • 변형: 자바스크립트

2. 프로젝트 폴더로 이동하고 종속 항목을 설치한 후 서버를 시작하세요.
   

   cd charts
   npm install
   npm run dev

프로젝트를 실행하면서 두 개의 구성 요소를 만들어 보겠습니다. 하나는 제품 가격 막대 차트용이고 다른 하나는 제품 카테고리 원형 차트용입니다.

? 1단계: 제품 가격 막대 차트 만들기(ProductChart.jsx)

이 구성요소에서는 API에서 제품 데이터를 가져와 막대 차트로 시각화합니다.

암호

다음 코드를 사용하여 src/comComponents/ProductChart.jsx에 파일을 생성합니다.

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

설명

• ResponsiveContainer: 너비를 95%, 높이를 450px로 설정하여 차트를 반응형으로 만듭니다.
• BarChart: 막대 차트를 렌더링하는 주요 구성 요소입니다.
• CartesianGrid: 가독성을 위해 배경 그리드를 추가합니다.
• XAxis & YAxis: 제품 ID 및 가격에 대한 라벨을 설정합니다.
• 도구 설명: 막대 위로 마우스를 가져가면 데이터가 표시됩니다.
• Bar: 각 막대가 제품 가격을 나타내는 막대를 렌더링합니다.

? 2단계: 제품 범주 원형 차트 만들기(CategoryChart.jsx)

이 구성요소에서는 제품 데이터를 가져와서 각 카테고리의 제품 수를 계산하고 원형 차트를 사용하여 시각화합니다.

암호

다음 코드를 사용하여 src/comComponents/CategoryChart.jsx에 파일을 만듭니다.

   npm create vite@latest

설명

• categoryCount 메서드: 각 카테고리의 제품 수를 계산하고 원형 차트에 표시할 결과 형식을 지정합니다.
• PieChart & Pie: 원형 차트를 렌더링하는 주요 구성 요소
• 셀: COLORS 배열로 정의된 각 파이 조각에 색상을 추가합니다.
• cx, cy 및 externalRadius: 컨테이너 내에서 원형 차트의 위치와 크기를 조정합니다.

?️ 3단계: App.js에서 구성 요소 렌더링

차트가 실제로 작동하는 모습을 보려면 App.js에서 이러한 구성 요소를 렌더링해야 합니다.

암호

src/App.js를 다음과 같이 업데이트하세요.

   cd charts
   npm install
   npm run dev

이렇게 하면 화면에 막대 차트와 원형 차트가 모두 표시됩니다!

? 결론

축하합니다! Recharts를 성공적으로 사용하여 React 앱에서 동적이고 반응이 빠른 데이터 시각화를 만들었습니다. 우리가 다룬 내용은 다음과 같습니다.

• Vite를 사용하여 React 프로젝트 설정
• Fakestore API에서 데이터 가져오기 및 처리
• Recharts를 사용하여 막대형 및 원형 차트 만들기

Recharts를 사용하면 대화형 시각화를 간단하고 사용자 정의할 수 있습니다. 더욱 매력적인 시각화를 만들기 위해 다른 차트 유형과 데이터 소스를 실험해보세요!

위 내용은 Recharts 마스터하기: ReactJS에서 차트 생성을 위한 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!