数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学ReactJS：如何使用Recharts创建饼图？
在本文中，我们将探索**Rechart** JS库，并在React应用程序中实现它，以了解如何使用它们。Rechart库专门用于在React应用程序上创建不同类型的图表。可以使用此库构建的图表包括折线图、条形图、饼图等。
在本教程中，我们将使用该库和一组数据入口点创建一个饼图。根据这些数据，将形成一个图表，该图表将使用饼图元素定义切片。它将具有data属性，该属性将包含创建的数据集，以及datakey属性，该属性将定义这些切片的属性名称及其值。
创建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 { PieChart, Pie, Cell, Tooltip, Legend } from "recharts";
class PieRechartComponent extends React.Component {
COLORS = ["#8884d8", "#82ca9d", "#FFBB28", "#FF8042", "#AF19FF"];
pieData = [
{
name: "Apple",
value: 54.85
},
{
name: "Samsung",
value: 47.91
},
{
name: "Redmi",
value: 16.85
},
{
name: "One Plus",
value: 16.14
},
{
name: "Others",
value: 10.25
}
];
CustomTooltip = ({ active, payload, label }) => {
if (active) {
return (
<div
className="custom-tooltip"
style={{
backgroundColor: "#ffff",
padding: "5px",
border: "1px solid #cccc"
}}
>
<label>{`${payload[0].name} : ${payload[0].value}%`}>/label>
</div>
);
}
return null;
};
render() {
return (
<PieChart width={730} height={300}>
<Pie
data={this.pieData}
color="#000000"
dataKey="value"
nameKey="name"
cx="50%"
cy="50%"
outerRadius={120}
fill="#8884d8"
>
{this.pieData.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={this.COLORS[index % this.COLORS.length]}
/>
))}
</Pie>
<Tooltip content={<this.CustomTooltip />} />
<Legend />
</PieChart>
);
}
}
export default PieRechartComponent;输出
上述程序将生成一个包含给定数据的饼图。当您将鼠标悬停在饼图上时，它将显示数据。您会发现类似于以下的结果
更新于：2022年4月25日
7000+ 次浏览
广告