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

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

在為你的項目選擇合適的繪圖工具時，要考慮到許多事情。本文將為你分析適合網(wǎng)頁開發(fā)者的 12 個最好的工具，讓你不再花費大把時間跟數(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 是一個在 D3.js 的基礎(chǔ)上專為可視化時間序列數(shù)據(jù)而開發(fā)的繪圖庫。雖然它只支持線圖、散點圖、柱狀圖、直方圖和數(shù)據(jù)表格，但它在這幾類圖表上的表現(xiàn)非常強(qiáng)。

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

同時它也是一個非常簡易和輕量級的選擇。

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

3. FusionCharts

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

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

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

4. Epoch

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

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

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

5. ECharts

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

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

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

6. D3.js

雖然并不是對用戶最友好的工具，但 d3.js 在 JavaScript 繪圖界的重要性是不可小覷的。許多其他的庫都是基于它所開發(fā)，因為它提供了你所能想到的所有功能。它支持 HTML、SVG 和 CSS，并且有著海量的用戶貢獻(xiàn)內(nèi)容來彌補它缺乏自定義內(nèi)容的劣勢。

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

7. Sigma

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

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

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

8. Highcharts

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

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

這是一個用它繪制的例子：

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

9. dc.js

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

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

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

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

10. dygraphs

由 Google 開發(fā)的 dygraphs 絕對是繪圖工具中的明星。到現(xiàn)在 Google Correlate 還在使用它（當(dāng)然，在設(shè)計上經(jīng)過了一些調(diào)整）。它可以被用于繪圖密集的項目，因為它能在不影響性能的情況下輕松地繪制幾百萬個數(shù)據(jù)點，這在很大程度上彌補了它那過于樸素的審美設(shè)計。

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

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

11. Vega

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

因為使用 Vega 不需要寫任何代碼（只要會編輯 JSON 文件即可），它是一個很好的 d3 替代品，能在降低使用復(fù)雜度的同時保留 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 更為精致一點。

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

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

文：Rohit Boggarapu