Recharts をマスターする: ReactJS でチャートを作成するための包括的なガイド

ReactJS を使用していて、グラフでデータに命を吹き込みたい場合は、Recharts を使用すると、見事な視覚化を簡単に作成する優れた方法が提供されます。このガイドでは、Recharts と Fakestore API を使用して商品データを取得し、棒グラフと円グラフで表示します。
github リポジトリやライブデモも確認できます。始めましょう!

⁉️ セットアップ: Vite から始める

まず、Vite を使用して新しい React アプリを作成しましょう。

1. 次のコマンドを使用して Vite をインストールします。

   npm create vite@latest

1. プロンプトに従います:

   • プロジェクト名: チャート
   • フレームワーク: React
   • バリアント: JavaScript

2. プロジェクト フォルダーに移動し、依存関係をインストールし、サーバーを起動します。
   

   cd charts
   npm install
   npm run dev

プロジェクトを実行したら、2 つのコンポーネントを作成しましょう。1 つは 製品価格棒グラフ 用、もう 1 つは 製品カテゴリ円グラフ 用です。

?ステップ 1: 製品価格棒グラフ (ProductChart.jsx) の作成

このコンポーネントでは、API から製品データを取得し、棒グラフで視覚化します。

コード

次のコードを使用して、src/components/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 と価格のラベルを設定します。
• ツールチップ: バーの上にマウスを置くとデータが表示されます。
• バー: 各バーが商品価格を表すバーをレンダリングします。

?ステップ 2: 製品カテゴリ円グラフ (CategoryChart.jsx) の作成

このコンポーネントでは、製品データを取得し、各カテゴリの製品を数え、円グラフを使用して視覚化します。

コード

次のコードを使用して、src/components/CategoryChart.jsx にファイルを作成します。

   npm create vite@latest

説明

• categoryCount メソッド: 各カテゴリ内の製品の数をカウントし、結果を円グラフに表示するようにフォーマットします。
• PieChart & Pie: 円グラフをレンダリングする主要コンポーネント。
• セル: COLORS 配列で定義された各円グラフのスライスに色を追加します。
• cx、cy、outerRadius: コンテナ内の円グラフの位置とサイズを設定します。

?️ ステップ 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 中国語 Web サイトの他の関連記事を参照してください。