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

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

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

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

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

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

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

雖然在 NPM上 發(fā)布于2017年12月，但這個(gè)4k stars 的庫(kù)仍然值得一提，它有一套基本但有用的UI 組件和主題，用于實(shí)現(xiàn) Google 的 MD。 為什么？ 因?yàn)樗?jiǎn)單，實(shí)用且對(duì)兼容較好。 但由于維護(hù)相對(duì)較少，請(qǐng)謹(jǐn)慎使用。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

你的點(diǎn)贊是我持續(xù)分享好東西的動(dòng)力，歡迎點(diǎn)贊！

干貨系列文章匯總?cè)缦?，覺(jué)得不錯(cuò)點(diǎn)個(gè)Star，歡迎 加群 互相學(xué)習(xí)。

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

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

關(guān)注公眾號(hào)，后臺(tái)回復(fù)福利，即可看到福利，你懂的。