React中Recharts圖表的應用與研究

柳海燕

(蘇州工業園區職業技術學院，江蘇 蘇州 215123)

0 引言

React是Facebook于2013年開源的用于構建用戶界面的框架，現在隨著React可以使用Node進行服務器渲染以及使用React Native開發原生移動應用功能的豐富，使得它現在成為Web開發的主流工具之一。

Recharts是2016年阿里巴巴前端團隊開發的一款可視化組件庫，用React進行設計，重新定義了組合與配置方式，官網為http://recharts.org。最初為了國際化發展官方只提供了英文文檔，所以，國內用戶數量增長相比國外慢很多。大部分同行還是使用百度的Echarts進行數據展示，崔蓬[1]在2019年探索了基于ECharts平臺的可視化開發方法。當然，針對不同的語言與開發環境，也有其他不同的數據可視化方法。比如，寇國釗等[2]在2019年介紹了基于Java技術的開源動態圖表開發組件JFreeChart。賈麗娟等[3]在2019年借助Python強大的數據處理和分析技術，將數據轉化為PyEcharts組件接口參數，實現由數據到可視化圖表的轉換。但由于大小、語言、顯示問題，上述都不是React框架的最佳選擇。

Recharts當前包含了中文、英文兩種文檔，在方便國際化的同時，也友好地滿足了本土化的需求。除了阿里指數、阿里數據兩個忠實用戶外，還有很多外國公司，如Fyndiq，Ahrefs等都在使用，相信隨著React用戶數量的增長，Recharts的應用前景也越來越廣闊。本文嘗試在React框架中引入Recharts進行數據可視化顯示。

1 Recharts安裝與使用

1.1 安裝

官方推薦使用npm的方式進行安裝，能更好地和CommonJS打包工具配合使用，命令為$ npm install recharts。

在實踐的過程中，npm更新會帶來版本問題。由于Yarn是Facebook發布的一款取代npm的管理工具，Rechats是基于React開發的，所以，筆者推薦可以嘗試用yarn安裝，安裝命令為 yarn add recharts。安裝成功后，會顯示Recharts的當前版本信息。

1.2 使用

首先，要選擇所需要的圖表類型，當前Recharts提供的圖表有AreaChart，BarChart，LineChart等11種類型，用戶可根據自己的應用需要進行選擇。其次，通過import添加所需要的組件。最后，根據組件屬性來使用組件進行顯示，甚至自定義組件，來實現定制化的功能。

2 React中使用Recharts定制化顯示數據時遇到的問題

2.1 Recharts中組件屬性使用

根據所開發應用的需要，采用Recharts中PieChart圖表類型來顯示數據。用到了PieChart的子組件Pie和Pie的子組件Cell，通過其fill屬性來傳遞數據項對應子節點的配置。通過Pie組件的data屬性來存放源數據，通過Pie組件的label屬性來展示圖形上的文本標簽。當然，所需組件事先需要通過import語句來引入。

2.2 用戶自定義Label

通過Pie組件的label屬性來展示圖形上的文本標簽，只不過，label的值寫成一個函數renderLabel，用該函數來渲染自定義的文本標簽。圖形顯示部分主要源代碼如下：

data={visitList}

dataKey="value"

nameKey="label"

cx={200}

cy={200}

labelLine={false}

label={this.renderLabel}

fill="#8884d8"

>

{visitList.map((entry, index) => )}

可以看到，此時，Pie的label屬性就是前面自定義的函數renderLabel，使得圖像按照需要進行內容顯示。

2.3 React路由

React通過路由庫React-Router，管理URL，實現組件的切換和狀態的變化。在本應用中，通過Route來指定路徑對應的組件，此統計顯示的代碼為 。當第一次單擊此路由對應的菜單時，圖表正常顯示，如圖1所示。

圖1 正常顯示的圖表

當單擊圖中其他菜單，比如，“訪問申請”“權限管理”后，再次單擊“申請統計”菜單時，Pie組件的label并不顯示，只有圖形，沒有圖形上的標注文字。因為圖表是按照份額計算了之后正常顯示的，只是沒有上面的標注。當嘗試刷新頁面時，數據又能正常顯示。

3 解決方案

3.1 解決思路

既然Recharts只是負責根據數據繪制圖形，且已經繪制完成，Recharts的label屬性在刷新之后也能夠顯示文本，沒有多余的屬性來改變這一切，那就從React的角度來嘗試解決這一問題。

3.2 方案一：forceRefresh的應用

既然每次強制刷新都可以使得數據正常顯示，那么可以在React的所有路由組件共用的底層接口組件Router上使用其forceRefresh屬性，因為Router是路由規則制定的最外層容器，所以，每次單擊菜單鏈接時，都會強制刷新，圖表每次可以正常顯示。

雖然解決了Recharts圖表顯示問題，但代價較大。其他所有路由都會受到強制刷新的牽連，所以，犧牲了應用程序執行效率。

3.3 方案二：key的應用

為了彌補方案一的不足，考慮不讓所有的路由強制更新，每次只有單擊 “申請統計”菜單所需路由的時候再強制刷新。這時，可以利用React中極其特殊的key屬性，雖然它不是給開發者用的，是給React自己使用的，但根據相同key的組件，React認為是同一個組件的特點，如果render顯示圖表時候，發現key不同了，那么每項都會重新銷毀然后重新創建，性能開銷要小很多。

于是，通過隨機函數隨機生成key的值，每次調用時key值不同，React就會重新渲染頁面，圖表確實可以正常顯示，且性能開銷比方案一小很多。

4 結語

本文闡述了筆者在通過React框架開發應用過程中使用Recharts的過程，遇到的問題以及解決方案，希望能夠為同樣想要在React中引用Recharts進行數據顯示的同行起到拋磚引玉的作用。