我們詮釋數(shù)據(jù)的方式和數(shù)據(jù)本身之間存在著巨大的鴻溝。尤其是當(dāng)我們唯一的選擇是盯著表格中一列列不知所云的數(shù)字時(shí)。這可能是最無聊的一種格式了。

沒有哪個(gè)網(wǎng)頁開發(fā)者會喜歡電子表格。好消息是，現(xiàn)在我們有了許多更加優(yōu)雅的方式來呈現(xiàn)數(shù)據(jù)，再也沒有必要使用靜態(tài)的 Excel 圖表了。

在為你的項(xiàng)目選擇合適的繪圖工具時(shí)，要考慮到許多事情。本文將為你分析適合網(wǎng)頁開發(fā)者的 12 個(gè)最好的工具，讓你不再花費(fèi)大把時(shí)間跟數(shù)據(jù)做斗爭，而是開始輕松地繪制漂亮的圖表。雖然本文推薦的工具是面向網(wǎng)頁開發(fā)者的，但其中一些并不需要會寫代碼就能使用。許多工具都有著豐富的交互式例子，即使是新手也能輕松地通過改動代碼來創(chuàng)建自定義圖表。

1. Google Charts

文檔和幫助信息豐富的 Google Charts 對于剛剛?cè)腴T JavaScript 繪圖的人來說是極佳的選擇。它的文檔里到處都是帶注釋的代碼和逐步的講解，可以直接用來把 HTML5 / SVG 圖標(biāo)嵌入到你的網(wǎng)頁中。

如果你需要更進(jìn)階的自定義功能或是 Google 原始提供的 18 類以外的圖表，下面會介紹一些有著更多類別和特性的選擇。

適合人群：追求靈活性和良好文檔的嚴(yán)肅開發(fā)者。

2. MetricsGraphics

MetricsGraphics 是一個(gè)在 D3.js 的基礎(chǔ)上專為可視化時(shí)間序列數(shù)據(jù)而開發(fā)的繪圖庫。雖然它只支持線圖、散點(diǎn)圖、柱狀圖、直方圖和數(shù)據(jù)表格，但它在這幾類圖表上的表現(xiàn)非常強(qiáng)。

跟 Google Charts 一樣（MetricsGraphics 是 Mozilla 的產(chǎn)品），豐富的文檔和例子使得它很容易上手。比如這個(gè)非常有趣的關(guān)于 UFO 目擊事件的交互式例子。

同時(shí)它也是一個(gè)非常簡易和輕量級的選擇。

適合人群：追求快速美觀同時(shí)又不需要寫一堆雜亂代碼的開發(fā)者。

3. FusionCharts

FusionCharts 支持 vanilla JavaScript、jQuery、Angular 等一系列高人氣的庫和框架。它內(nèi)置 90 多種圖表和超過 1000 種地圖，相比 Google Charts 和 MetricsGraphics 要完整得多。你可以在這里查看它所支持的全部圖表類型。

考慮到應(yīng)用或是網(wǎng)站的拓展性，如果你選擇了一個(gè)功能不完整的繪圖庫，這就有可能在將來發(fā)展成一個(gè)問題。而像 Microsoft、Google 和 IBM 這樣的公司都在使用 FusionCharts，這說明它是一個(gè)能滿足企業(yè)級拓展性需求的工具。

適合人群：需要各種不同種類的易自定義圖表的開發(fā)者。

4. Epoch

Epoch 是一個(gè)基于 d3.js 開發(fā)的工具，它使得開發(fā)者可以方便地在他們的應(yīng)用或是網(wǎng)站上部署實(shí)時(shí)圖表。它的文檔整潔，完全免費(fèi)并且開源，這使得它對于不想花錢購買重量級解決方案的人來說是一個(gè)很好的選擇。

對普通數(shù)據(jù)和實(shí)時(shí)數(shù)據(jù)，Epoch 都支持 5 種圖表類型。這個(gè)數(shù)量并不能與 FusionCharts 或是 Highcharts 這種特性完整的產(chǎn)品對抗，但它所專長的是以簡單和友好的方式呈現(xiàn)實(shí)時(shí)數(shù)據(jù)。

適合人群：需要簡單靈活的實(shí)時(shí)數(shù)據(jù)呈現(xiàn)方案的開發(fā)者。

5. ECharts

百度的 ECharts 是一個(gè)很棒的工具，它支持在繪制完數(shù)據(jù)后再對其進(jìn)行操作。這個(gè)被稱為 Drag-Recalculate 的特性使得用戶可以在圖表之間拖動一部分的數(shù)據(jù)并得到實(shí)時(shí)的反饋。同時(shí)，ECharts 是專為繪制大量數(shù)據(jù)設(shè)計(jì)的。它可以瞬間在二維平面上繪制出 20 萬個(gè)點(diǎn)，并用專為 ECharts 開發(fā)的輕量級 Canvas 庫 ZRender 使數(shù)據(jù)動起來。

你可以在這里對上圖進(jìn)行操作，來體驗(yàn) ECharts 所提供的特性。

適合人群：想盡量避免寫代碼并有實(shí)時(shí)數(shù)據(jù)操作需求的開發(fā)者。

6. D3.js

雖然并不是對用戶最友好的工具，但 d3.js 在 JavaScript 繪圖界的重要性是不可小覷的。許多其他的庫都是基于它所開發(fā)，因?yàn)樗峁┝四闼芟氲降乃泄δ?。它支?HTML、SVG 和 CSS，并且有著海量的用戶貢獻(xiàn)內(nèi)容來彌補(bǔ)它缺乏自定義內(nèi)容的劣勢。

適合人群：不怕寫代碼的硬核繪圖專家。

7. Sigma

跟上面已經(jīng)提到過的工具相比，Sigma 有著自己獨(dú)特的定位，那就是圖模型的繪制。它基于 Canvas 和 WebGL 開發(fā)并提供了公開的 API。所以你可以在 GitHub 上找到社區(qū)貢獻(xiàn)的許多插件。舉例來說，你可以用 Sigma.js 畫出這樣的圖：

Sigma 同時(shí)也是響應(yīng)式的，并支持觸屏。開發(fā)者很容易添加新的功能以及精細(xì)地控制邊和頂點(diǎn)的規(guī)格。

適合人群：需要專為繪制圖模型設(shè)計(jì)的強(qiáng)大工具的開發(fā)者。

8. Highcharts

人氣極高的 Highcharts 可以在不依賴插件的情況下繪制交互式的圖表。它高靈活性的繪圖 API 也被 Nokia、Twitter、Visa 和 Facebook 這樣的公司所青睞。

Highcharts 對于非商業(yè)使用是免費(fèi)的，而商業(yè)許可的價(jià)格是一份 590 美元（附帶技術(shù)支持）。

這是一個(gè)用它繪制的例子：

適合人群：需要在技術(shù)支持的幫助下繪制各種復(fù)雜的圖表的開發(fā)者。

9. dc.js

dc.js 是一個(gè)開源的 JavaScript 繪圖庫。它非常適合用來創(chuàng)建交互式的儀表盤（Dashboard）。圖表之間是有聯(lián)系的，所以當(dāng)你與其中一個(gè)部分進(jìn)行交互時(shí)，其他部分都會做出實(shí)時(shí)的反饋。這是一個(gè)例子：

除了一些在線課程以外，你可以通過各種例子來學(xué)習(xí)使用這個(gè)庫。等你照著文檔動手一遍以后就有能力創(chuàng)建自己的圖表了。

雖然 dc.js 并沒有像 ECharts 或是 Google Charts 那樣豐富的功能，但它在自己的賣點(diǎn)——易于呈現(xiàn)和探索巨量的維度數(shù)據(jù)集上做的非常好。

適合人群：需要為關(guān)系型圖表創(chuàng)建一個(gè)儀表盤的開發(fā)者。

10. dygraphs

由 Google 開發(fā)的 dygraphs 絕對是繪圖工具中的明星。到現(xiàn)在 Google Correlate 還在使用它（當(dāng)然，在設(shè)計(jì)上經(jīng)過了一些調(diào)整）。它可以被用于繪圖密集的項(xiàng)目，因?yàn)樗茉诓挥绊懶阅艿那闆r下輕松地繪制幾百萬個(gè)數(shù)據(jù)點(diǎn)，這在很大程度上彌補(bǔ)了它那過于樸素的審美設(shè)計(jì)。

從一開始作為 Google 的一個(gè)內(nèi)部項(xiàng)目到最后公開發(fā)布，dygraphs 一直有著活躍的社區(qū)支持。同時(shí)它也在 GitHub 上開源。

適合人群：需要有著活躍支持的專為繪制海量數(shù)據(jù)集設(shè)計(jì)的工具的開發(fā)者。

11. Vega

Vega 是一個(gè)基于 d3.js 的用于創(chuàng)建、分享和保存可視化圖標(biāo)的庫。它由許多部件組成，其中一些能夠在不需要寫代碼的前提下達(dá)到與 d3 競爭的水平。Vega 能夠把 JSON 數(shù)據(jù)轉(zhuǎn)換成 SVG 或 HTML5 圖表。雖然這沒什么了不起的，但它把這一步做的很踏實(shí)。

因?yàn)槭褂?Vega 不需要寫任何代碼（只要會編輯 JSON 文件即可），它是一個(gè)很好的 d3 替代品，能在降低使用復(fù)雜度的同時(shí)保留 d3 的特性。

適合人群：需要 d3 強(qiáng)大的特性又不希望從頭學(xué)起的開發(fā)者。

12. NVD3

最后介紹的工具也是基于 d3.js 的。作為繪圖界的佼佼者，NVD3 是由一系列部件組成的，允許開發(fā)者創(chuàng)建可重用的圖標(biāo)。你可以在它的網(wǎng)站上找到許多 demo 和對應(yīng)的代碼。這也是上手 NVD3 的最佳方式。

你可以看到，NVD3 的審美風(fēng)格要比 d3.js 更為精致一點(diǎn)。

它支持 11 種圖表類型，包括區(qū)域圖、線圖、柱狀圖、氣泡圖、餅狀圖和散點(diǎn)圖。同時(shí)也支持所有現(xiàn)代瀏覽器以及 IE 10 以后的版本。

適合人群：熟悉 d3 并想要可重用圖表的開發(fā)者。

文：Rohit Boggarapu