現(xiàn)代 Web 開(kāi)發(fā)在將體驗(yàn)和功能做到***的同時(shí)，對(duì)于美觀的追求也越來(lái)越高，數(shù)據(jù)可視化、動(dòng)畫(huà)交互、2D/3D 等元素已然成為標(biāo)配。

以下是為 Web 開(kāi)發(fā)者推薦的一些精品開(kāi)源圖形庫(kù)，旨在專(zhuān)注于最常見(jiàn)的問(wèn)題和最常用的東西。將針對(duì)動(dòng)畫(huà)(Animation)、數(shù)據(jù)可視化(Data Visualization)、2D/3D 分別整理。

數(shù)據(jù)可視化

1、D3.js

***的可視化庫(kù)之一，被各種表格插件、庫(kù)、框架所使用。它允許綁定任意數(shù)據(jù)到 DOM ，然后將數(shù)據(jù)驅(qū)動(dòng)轉(zhuǎn)換應(yīng)用到 Document 中。你可以使用它從數(shù)組中生成 HTML 表，或是使用相同的數(shù)據(jù)創(chuàng)建具有平滑過(guò)渡和交互的交互式 SVG 條形圖。

效果預(yù)覽： 點(diǎn)此查看

2、Recharts

基于 React 的組合式圖表，用解耦的、可重用的 React 組件快速構(gòu)建你的圖表。依賴(lài)于輕量級(jí)的 D3 子模塊構(gòu)建 SVG 元素，還可以調(diào)整組件的屬性與傳遞組件來(lái)自定義圖表。

效果預(yù)覽： 點(diǎn)此查看

類(lèi)似的將 React 和 D3 結(jié)合在一起的還有：

Victory

一個(gè)用于構(gòu)建圖表模塊化和交互式數(shù)據(jù)可視化的 ReactJS 庫(kù)。 效果預(yù)覽

VX

可重用的 low-level 可視化組件集合。 效果預(yù)覽

3、ECharts

一個(gè)由百度開(kāi)源的純 Javascript 圖表庫(kù)，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器(IE8/9/10/11、Chrome、Firefox、Safari 等)，底層依賴(lài)輕量級(jí)的 Canvas 類(lèi)庫(kù) ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。

效果預(yù)覽： 點(diǎn)此查看

4、Highcharts

同樣是一個(gè)制作圖表的純 Javascript 類(lèi)庫(kù)，為網(wǎng)站或 Web 應(yīng)用提供了一種簡(jiǎn)單的方法來(lái)添加交互式圖表。 目前支持直線(xiàn)圖、曲線(xiàn)圖、區(qū)域圖、區(qū)域曲線(xiàn)圖、柱狀圖、餅狀圖、散布圖等類(lèi)型。需注意的是，商業(yè)使用該庫(kù)需要購(gòu)買(mǎi)授權(quán)。

效果預(yù)覽： 點(diǎn)此查看

5、Google Charts

Google Charts 提供了一種可視化網(wǎng)站數(shù)據(jù)的方式，從簡(jiǎn)單的線(xiàn)圖到復(fù)雜的層次樹(shù)圖，內(nèi)置的圖表庫(kù)提供大量打開(kāi)即用的圖表類(lèi)型。它還可以自定義圖表以適應(yīng)網(wǎng)站外觀，圖表具有高度的互動(dòng)性，使用 HTML5 / SVG 技術(shù)呈現(xiàn)，以提供跨瀏覽器兼容性和跨平臺(tái)可移植性。

效果預(yù)覽： 點(diǎn)此查看

6、Plotly.js

一個(gè) high-level 聲明式圖表庫(kù)，基于 D3 和 stack.gl ，內(nèi)置 20 多種圖表類(lèi)型，包括 3D 圖表、統(tǒng)計(jì)圖和 SVG 圖等。

7、Chart.js

一個(gè)簡(jiǎn)單靈活的基于 HTML5 的 JavaScript 圖表庫(kù)，瀏覽器兼容性良好，內(nèi)置 8 種不同的圖表類(lèi)型以可視化數(shù)據(jù)，且均可定制，可重新繪制窗口上的圖表大小，以獲得***的粒度呈現(xiàn)。

效果預(yù)覽： 點(diǎn)此查看

8、AntV G2

一個(gè)由純 JavaScript 編寫(xiě)、強(qiáng)大的語(yǔ)義化圖表生成工具，它提供了一整套圖形語(yǔ)法，可以讓用戶(hù)通過(guò)簡(jiǎn)單的語(yǔ)法搭建出無(wú)數(shù)種圖表，并且集成了大量的統(tǒng)計(jì)工具，支持多種坐標(biāo)系繪制，可以讓用戶(hù)自由地定制圖表。由螞蟻金服開(kāi)源。

效果預(yù)覽： 點(diǎn)此查看

他們家還有一個(gè) AntV G6 ，是一個(gè)關(guān)系圖基礎(chǔ)技術(shù)框架，能用來(lái)進(jìn)行關(guān)系圖的查看視圖和編輯視圖進(jìn)行快速的二次開(kāi)發(fā)。

9、Timesheet.js

基于 HTML5 和 CSS3 可視化數(shù)據(jù)和事件的庫(kù)。用 JavaScript 創(chuàng)建事件軸，用 CSS 美化樣式，還有適合移動(dòng)端的方法。這個(gè)庫(kù)偏向于做時(shí)間軸(表)。

10、Leaflet

適用于移動(dòng)設(shè)備的交互式 JavaScript 地圖庫(kù)，具有大多數(shù)開(kāi)發(fā)人員所需要的所有制圖(mapping)功能。設(shè)計(jì)簡(jiǎn)單，性能和可用性較好，可在所有主流的桌面和移動(dòng)平臺(tái)上高效運(yùn)行，也支持?jǐn)U展大量的插件。API 簡(jiǎn)單并易于使用。