13. 圖表

來自專欄 新入社員向いてのReact.js教程在這個文章中，我們會介紹圖表組件化和實用化。

組件化就是用一些非react實現的類庫，來進行react化。就像react-bootstrap就是對bootstrap這個類庫來進行了react的組件化的重新實現。

實用化就是直接利用了現成的基於react的類庫，比如victory.js就是一個基於react的圖表的組件。

然後對於圖表這兩個字，我們會介紹三類組件：

1. 圖標，icon

我們會將font-awesome進行一個react的重新實現，實現幾個簡單的圖標組件。

2. 圖，chart

這邊說的chart的話，就是像dc.js, highchart.js, echart.js這樣的類庫根據數據進行繪製實現的圖。

圖的實現主要有兩種，一種是基於svg，另一種是基於canvas的。當然更有優缺點，我們並不會比較兩者的優缺點。

我們會用react實現一個非react實現的圖類庫，現在還沒想好用那個，主要會選擇dc.js或者echart.js（百度的）。當然圖也會有一個實用化的實例，我打算用victory.js來進行介紹。

3. 表，table或者datagrid

表的話，也是顯示數據的一種形式。但是相對於圖來說，並不那麼直觀。但是從表中，可以看出更詳細的內容。

我們會用react-bootstrap中的Table組件來實用化一個表的實例。然後用fixed-data-table來實用化第二個表的實例。當然我們也會自己實現一個更高級一點的表的組件（基於react-bootstrap的一些組件來實現一個更高級的表）

對於這三者的話，我覺得在一個文章裡面介紹的話，會太匆匆忙忙。因此我會另外開一個專欄，專門介紹這個章節的內容。到時候大家可以從我的主頁來找到那個專欄進行閱讀。

推薦閱讀：