掌握 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

项目运行后，让我们创建两个组件：一个用于产品价格条形图，另一个用于产品类别饼图。

？第 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和价格的标签。
• 工具提示：将鼠标悬停在条形上时显示数据。
• Bar：渲染条形，每个条形代表一个产品价格。

？步骤 2：创建产品类别饼图 (CategoryChart.jsx)

在此组件中，我们将获取产品数据，计算每个类别中的产品数量，并使用饼图将它们可视化。

代码

使用以下代码在 src/components/CategoryChart.jsx 中创建文件：

   npm create vite@latest

解释

• categoryCount方法：统计每个类别中的产品数量，并格式化结果以在饼图中显示。
• PieChart & Pie：渲染饼图的主要组件。
• Cell：为每个饼图切片添加颜色，由 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中文网其他相关文章！