如何使用 React Native 繪製圖表?

我必須先告訴你結論:目前我還沒有找到可以方便在 iOS 和 Android 繪製精緻圖表的 charting lib;如果有,請告訴我,plz!

上方這張圖表,是用 react-native-art-svg 繪製的,也是目前我找到的最佳解。使用這一套程式庫刻圖表是一件非常有趣的過程,但是我相信你應該不會想在專案上用它來繪製複雜的圖表。

上禮拜是 React Conf 2016,我花了一些時間在 youtube 上聽完了重播。如果你跟我一樣也有跟到這場 conf,你是否也熱血得認為 React 就是我們的未來?或是因為這場 conf,你更相信 React Native 將會顛覆現今公司和組織的結構,然後就~很想要捲起袖子來做些什麼呢?

我就是這麼想的,或許不久後,公司接的專案都可以用 React Native 解決,那麼以往在 Android 和 iOS 不同平台上刻 UI 所費的功夫將會大幅的減少。不過,在那一刻真正來臨前,我想我可以先實作幾個常用的需求,來試試 React Native 的極限。

第一個挑的,就是圖表元件。

在 Android 上,找到了還不錯精緻的 charting lib - MPAndroidChart,且另外有好心的神人把它翻寫成了 iOS 版本(ios-charts)。雖然我沒有實際去玩過,但是從同事的口中,他們認為這兩個 lib 的 API 和文件都很完整,也應該能達到大部分的繪圖需求。因此,我以這個當目標,來找找 React Native 的解決方法。

下面是我目前找到的方法:

  1. react-native-chart
    目前僅支援 ios 版,而且完整度也還不夠,如果要客製化複雜的圖表,就不適合了!
  2. react-native-chart-android,
    react-native-ios-charts,
    react-native-mp-android-chart,
    react-native-mpchart
    上面這四個庫,皆是尋求使用 React Native 與 MPAndroidChart 和 ios-charts 溝通的解決之道。雖然我沒實際去用過他們,不過都不符合我想要找的目標:可以同一份 code 或 API,跑在 iOS 和 Android 兩個平台。
  3. react-native-svg
    找了一陣子後,我想說好吧,那我就來找看看 SVG 的解決方法。一開始找到這個專案,但是因為它是跟 iOS 的 SVGKit 去做溝通,Android 就抱歉沒支援了,所以放棄。
  4. react-native-art-svg
    尋尋覓覓之後,我找到了這個專案。這也是我第一次認真研究了 react-art。基本上它的解決方法是提供 SVG 的規格去繪圖表,但是真的在幫我們處理要如何在 iOS 或 Android 上繪圖的是 react-art而這一個也是我目前比較中意的方法,雖然我認為它用在專案或複雜的圖表上,應該會瘋掉。

結論

結論是,我正在思考是否該挖一個坑,而可以同時解決在 Web 和 Mobile 繪製精緻圖表的這個需求。所以,如果你有任何的興趣或回應,請告訴我:)


這裡補充 ReactJS.tw 社群裡大大提供的解法(連結):

  1. react-native-vs-charts
    這是用 View 和 Style 的解法,還記得我在搜尋這個主題時,看到的第一篇文章是「Let’s drawing charts in React-Native without any library」。這篇文章蠻受益的,但是當初直覺的認為 View 應該無法繪製複雜的圖表,所以放棄了這個方向,不過這個!
  2. react-art-d3
    我沒用過這個 lib,不過我看了一下 source code,發現了 d3-shape 這個 lib。也試了一下,覺得如果拿來搭配 React Native Art 和 react-native-art-svg,應該是一個理想的選擇!