如何在 ReactJS 中使用 Recharts 创建面积图?

react jsjavascript libraryfront end technology更新于 2024/11/23 2:52:17

在本文中，我们将探索 Rechart JS 库，并在 React 应用程序中实现它，以了解它们的使用方法。Rechart 库专门用于在 React 应用程序上创建不同类型的图表。可以使用此库构建的图表包括折线图、条形图、饼图、面积图等。

在本教程中，我们将创建一个包含所需数据点的 面积图，并将其显示给用户。我们将使用由数据集中的数据定义的 data 属性来定义面积图的切片。data-key 属性是包含切片值的属性名称。

创建 React 应用程序

1.使用以下命令创建一个简单的 React 应用 −

npx create-react-app myApp

2. 创建应用后，导航到其应用文件夹。

cd myApp

3. 现在，使用以下命令安装要在 ReactJS 应用中使用的 recharts 模块。

npm install --save recharts

添加库后，我们可以使用此库创建饼图。

示例 1

在下面的示例中，我们使用 Recharts 依赖项创建了一个面积图。请在您的 app.js 文件中添加以下代码，以便在您的 React 应用中配置饼图。

# app.js

import React from "react";
import {
   AreaChart,
   Area,
   YAxis,
   XAxis,
   CartesianGrid,
   Tooltip,
   Legend
   } from "recharts";
   class AreaRechartComponent extends React.Component {
      data = [
         {
            name: "Jan 2019",
            "Product A": 3432,
            "Procuct B": 2342
         },
         {
            name: "Feb 2019",
            "Product A": 2342,
            "Procuct B": 7746
         },
         {
            name: "Mar 2019",
            "Product A": 4565,
            "Procuct B": 2556
         },
         {
            name: "Apr 2019",
            "Product A": 6654,
            "Procuct B": 4465
         },
         {
            name: "May 2019",
            "Product A": 8765,
            "Procuct B": 5553
         }
      ];
      render() {
         return (
            <AreaChart
               width={730}
               height={250}
               data={this.data}
               margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
            <defs>
               <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8} />
                  <stop offset="95%" stopColor="#8884d8" stopOpacity={0} />
               </linearGradient>
               <linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="#82ca9d" stopOpacity={0.8} />
                  <stop offset="95%" stopColor="#82ca9d" stopOpacity={0} />
               </linearGradient>
            </defs>
            <XAxis dataKey="name" />
            <YAxis />
            <CartesianGrid strokeDasharray="3 3" />
            <Tooltip />
            <Legend />
            <Area
               type="monotone"
               dataKey="Product A"
               stroke="#8884d8"
               fillOpacity={1}
               fill="url(#colorUv)"/>
            <Area
               type="monotone"
               dataKey="Procuct B"
               stroke="#82ca9d"
               fillOpacity={1}
               fill="url(#colorPv)"/>
            </AreaChart>
      );
   }
}
export default AreaRechartComponent;