摘要：數(shù)據(jù)可視化庫超過的的可能是最流行和最廣泛的數(shù)據(jù)可視化庫。是一組組件，用于高效地渲染大型列表和表格數(shù)據(jù)。一種優(yōu)雅而靈活的方式，可以利用組件來支持實際的數(shù)據(jù)可視化。

想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！

超過 10k stars 和 1k fork，NativeBase 是一個廣受歡迎的 UI 組件庫，它為 React native 提供了幾十個跨平臺組件。當使用 NativeBase 時，你可以使用任何現(xiàn)成的本地第三方庫，并且項目本身圍繞著它提供了豐富的生態(tài)系統(tǒng)，從有用的starter-kit到可定制的主題模板。這是一個不錯的入門工具包。

在超過1 5k 的 stars ，react-native-elements是一個高度可定制的跨平臺 UI 工具包，完全用 Javascript 構(gòu)建。 其作者聲稱“React Native Elements 的想法更多的是關(guān)于組件結(jié)構(gòu)而不是實際設(shè)計，這意味著在設(shè)置某些元素時可以更少的樣板，但可以完全控制它們的設(shè)計”，這應該使它對新開發(fā)人員和經(jīng)驗豐富的老手都很有吸引力。 這是一個示例 Expo 應用程序，顯示了所有正在運行的組件。

超過 4 k stars 的 Shoutem 是一個 React Native UI Kit，由 UI 組件、主題和組件動畫三部分組成。該庫為 iOS 和 Android 提供了一組跨平臺組件，所有組件都是可組合和可定制的。每個組件還具有與其他組件一致的預定義樣式，這使得無需手動定義復雜樣式就可以構(gòu)建復雜組件。

超過 3 k stars 的 UI Kitten 提供了一個可定制和可重用的 react-native 組件工具包，該工具包基于將樣式定義移動到特定位置的概念，使組件可重用，并以一種單一的方式設(shè)計樣式。通過傳遞一組不同的變量，可以很容易地動態(tài)更改主題。這里有一個不錯的 Expo 事例，可看看。

超過 2 k stars 的庫，帶有一組可高度定制的 UI 組件，實現(xiàn)了 Google’s material design。注意，庫使用了一個名為uiTheme的JS對象，該對象通過上下文傳遞，以獲得最大的可定制性。默認情況下，這個uiTheme對象基于你可以在這里找到的lightTheme。

雖然在 NPM上 發(fā)布于2017年12月，但這個4k stars 的庫仍然值得一提，它有一套基本但有用的UI 組件和主題，用于實現(xiàn) Google 的 MD。 為什么？ 因為它簡單，實用且對兼容較好。 但由于維護相對較少，請謹慎使用。

超過 1.5k stars 的 Nachos UI 是一個React Native 組件庫，擁有 30 多個可定制組件，多虧了 react-native-web，這些組件也可以在web上工作。

Wix engineering 正在開發(fā)這個最先進的 UI 工具集和 React native (demo)組件庫，它還支持 react-native-animatable 和 react-native-blur 開箱即用。庫附帶一組預定義的樣式預置(轉(zhuǎn)換為修飾符)，包括顏色、排版、陰影、邊框半徑等。

超過 3K stars 的 React Native Paper 是一個跨平臺的 UI 組件庫，它遵循了 material design 指南，支持全局主題化，還有一個可選的 babel-plugin 來減小模塊大小。下面是一個Expo 示例應用程序，可以幫助你快速了解這個庫。

超過 10k stars 的庫是 React Native 的一組可自定義圖標，支持NNavBar/TabBar/ToolbarAndroid,，圖像源和完整樣式。 不出所料，它非常有用，并被數(shù)千個應用程序以及其他UI組件庫（如react-native-paper）使用。 該庫提供了開箱即用的預制捆綁圖標集，以下是庫中所有圖標的完整示例。

超過 1.35 stars 的Teaset 是一個UI庫，用于 react native，包含20多個純JS(ES6)組件，專注于內(nèi)容顯示和動作控制。文檔很少(但很全)，它的簡單性和設(shè)計吸引了我的眼球。

超過 80k 的 star的 D3.js 可能是最流行和最廣泛的 Javascript 數(shù)據(jù)可視化庫。D3 用于基于數(shù)據(jù)操縱文檔，并使用 HTML、SVG 和 CSS 實現(xiàn)數(shù)據(jù)。D3 對 web標準的強調(diào)為你提供了現(xiàn)代瀏覽器的功能，而無需耦合到專有框架，將可視化組件和數(shù)據(jù)驅(qū)動的 DOM 操作方法結(jié)合在一起。它允許你將任意數(shù)據(jù)綁定到文檔對象模型(DOM)，然后將數(shù)據(jù)驅(qū)動轉(zhuǎn)換應用到文檔。這里有一個很好的例子庫。

一個非常受歡迎的（40k星）開源 HTML 5圖表庫，使用 canvas 元素的響應式 Web 應用程序。 V.2 提供了混合圖表類型，新的圖表軸類型和漂亮的動畫。 設(shè)計簡單而優(yōu)雅，有 8 種基本圖表類型，你可以將庫與 moment.js 組合用于時間軸。

這個非常受歡迎的庫(超過45K星; 1K貢獻者)使用WebGL創(chuàng)建3d動畫。 該項目的靈活性和抽象性意味著它對于可視化2維或3維數(shù)據(jù)也很有用。 例如，你也可以使用此指定模塊通過 WebGL 進行3D 圖形可視化，或者嘗試使用此在線游樂場。

百度的 Echarts項目(超過30k stars)是一個用于瀏覽器的交互式圖表和可視化庫。它是用純JavaScript編寫的，基于zrender canvas庫。它支持Canvas、SVG(4.0+)和VML格式的渲染圖表。除了PC和移動瀏覽器，echart 還可以與 node-Canvas 一起使用，實現(xiàn)高效的服務(wù)器端渲染(SSR)。

Highcharts JS 是超過一個 8K stars 基于 SVG 圖表庫，支持 VML 和舊瀏覽器的 canvas。它聲稱全球 100 家最大的公司中有 72 家使用 eb，這使得它(可能)成為世界上最流行的JS圖表API (Facebook、Twitter)。

MetricsGraphics.j (7k stars)是一個用于可視化和顯示時間序列數(shù)據(jù)的優(yōu)化庫。它相對較小(80kb壓縮)，提供了精密且優(yōu)雅的線形圖、散點圖、直方圖、條形圖和數(shù)據(jù)表的選擇，以及密度圖和基本線性回歸等特性。這里有一個到交互式示例庫的鏈接。

Recharts 是一個使用 React 和 D3 構(gòu)建的圖表庫，支持聲明式 React 組件方式。該庫提供了原生 SVG 支持，輕量級依賴樹(D3子模塊)通過組件 props 高度可定制。你可以在文檔網(wǎng)站上找到更多的例子。

一個 10k stars 的 Javascript 向量庫，用于處理 web 中的向量圖形。該庫使用SVG W3C推薦標準和 VML 作為創(chuàng)建圖形的基礎(chǔ)，因此每個圖形對象也是一個 DOM 對象，你可以附加 JavaScript 事件處理程序。Raphael 目前支持 Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+和 Internet Explorer 6.0+。

8k stars 的 C3js 是一個基于 D3 的可重復使用的圖表庫，用于Web應用程序。 該庫為每個元素提供類，因此你可以通過類定義自定義樣式，并通過 D3 直接擴展結(jié)構(gòu)。 它還提供了各種 API 和回調(diào)來訪問圖表的狀態(tài)。 通過使用它們，你甚至可以在渲染后更新圖表，看看這些例子。

[React-vis]45是優(yōu)步的一套 React 組件，用于以一致的方式顯示數(shù)據(jù)，包括線/面/條形圖，熱圖，散點圖，等高線圖，六邊形熱圖等等。 該庫不需要任何先前的 D3 或任何其他數(shù)據(jù)庫的知識，并提供低級模塊化構(gòu)建塊組件，如 X/Y 軸。

React virtualized (12k stars)是一組 React 組件，用于高效地渲染大型列表和表格數(shù)據(jù)。每個發(fā)行版都提供ES6、CommonJS 和 UMD 構(gòu)建，并且該項目支持 Webpack 4 工作流。請注意 react，為了避免版本沖突，必須將 react-dom 指定為對等依賴項。

Victory 是一個收集 React 可組合組件的集合，用于構(gòu)建交互式數(shù)據(jù)可視化，由強大的實驗室構(gòu)建，擁有超過6k stars Victory對Web和React Native應用程序使用相同的API，以便于跨平臺制圖。一種優(yōu)雅而靈活的方式，可以利用 React組件來支持實際的數(shù)據(jù)可視化。

超過5K stars 的 Raw 是電子表格和數(shù)據(jù)可視化之間的連接鏈接，用于在d3.js庫之上創(chuàng)建基于矢量的自定義可視化。它可以處理表格數(shù)據(jù)(擴展列表和逗號分隔值)，也可以處理來自其他應用程序的復制粘貼文本。基于SVG格式，可以使用向量圖形應用程序編輯可視化，以便進一步改進，或者直接嵌入到web頁面中。

超過 11k 的stars Metabase中，使用SQL創(chuàng)建數(shù)據(jù)儀表板是一種非?？焖俸秃唵蔚姆椒?，不需要知道SQL(但是對于分析人員和數(shù)據(jù)專業(yè)人員使用SQL模式)。你可以創(chuàng)建規(guī)范段和度量，將數(shù)據(jù)發(fā)送到Slack(并使用 MetaBot 在 Slack 中查看數(shù)據(jù))等等。這可能是為你的團隊在內(nèi)部可視化數(shù)據(jù)的一個很好的工具，盡管可能需要進行一些維護。

原文：https://blog.bitsrc.io/11-rea...
https://blog.bitsrc.io/11-jav...

你的點贊是我持續(xù)分享好東西的動力，歡迎點贊！

干貨系列文章匯總?cè)缦?，覺得不錯點個Star，歡迎 加群 互相學習。

https://github.com/qq44924588...

我是小智，公眾號「大遷世界」作者，對前端技術(shù)保持學習愛好者。我會經(jīng)常分享自己所學所看的干貨，在進階的路上，共勉！

關(guān)注公眾號，后臺回復福利，即可看到福利，你懂的。