掌握 Recharts：在 ReactJS 中建立圖表的綜合指南

如果您使用 ReactJS 並希望透過圖表將資料帶入生活，Recharts 提供了一種輕鬆創建令人驚嘆的視覺化效果的好方法。在本指南中，我們將使用 Recharts 和 Fakestore API 來取得產品資料並以長條圖和圓餅圖顯示。
您也可以查看 github 儲存庫和現場演示。讓我們開始吧！

?️設定：從Vite開始

首先，讓我們使用 Vite 建立一個新的 React 應用程式。

1. 使用以下指令安裝Vite：

1. 依照提示操作：

   • 項目名稱：圖表
   • 框架：React
   • 變體：JavaScript

2. 移動到專案資料夾，安裝依賴項，然後啟動伺服器：
   

專案運作後，讓我們建立兩個元件：一個用於產品價格長條圖，另一個用於產品類別圓餅圖。

？第 1 步：建立產品價格長條圖 (ProductChart.jsx)

在此元件中，我們將從 API 取得產品資料並使用長條圖將其視覺化。

程式碼

使用以下程式碼在 src/components/ProductChart.jsx 中建立檔案：

解釋

• ResponsiveContainer：透過將圖表的寬度設定為 95%，高度設定為 450px，使圖表具有響應式。
• BarChart：渲染長條圖的主要元件。
• CartesianGrid：新增背景網格以提高可讀性。
• XAxis & YAxis：設定產品ID和價格的標籤。
• 工具提示：將滑鼠停留在條形上時顯示資料。
• Bar：渲染條形，每個條形代表一個產品價格。

？步驟 2：建立產品類別圓餅圖 (CategoryChart.jsx)

在此組件中，我們將獲取產品數據，計算每個類別中的產品數量，並使用餅圖將它們視覺化。

程式碼

使用以下程式碼在 src/components/CategoryChart.jsx 中建立檔案：

解釋

• categoryCount方法：統計每個類別中的產品數量，並格式化結果以在餅圖中顯示。
• PieChart & Pie：渲染圓餅圖的主要元件。
• Cell：為每個圓餅圖切片加上顏色，由 COLORS 陣列定義。
• cx、cy 和outerRadius：在容器內放置餅圖並調整其大小。

️第3步：App.js中渲染元件

要查看正在運行的圖表，您需要在 App.js 中渲染這些元件。

程式碼

更新 src/App.js 如下：

完成此操作後，您應該在螢幕上看到條形圖和餅圖！

---

？結論

恭喜！您已成功使用 Recharts 在 React 應用程式中建立動態且響應式的資料視覺化。我們涵蓋了：

• 使用 Vite 設定 React 項目
• 從Fakestore API取得和處理數據
• 使用 Recharts 建立長條圖和圓餅圖

Recharts 讓建置互動式視覺化變得簡單且可自訂。嘗試其他圖表類型和資料來源，以創建更具吸引力的視覺化效果！

以上是掌握 Recharts：在 ReactJS 中建立圖表的綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！