資料結構
網路
關係資料庫管理系統(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+ 次瀏覽
廣告