沒有一個(gè)Web開發(fā)者喜歡電子表格，然而，現(xiàn)在我們有了許多更好的方法來呈現(xiàn)數(shù)據(jù)，不需要再使用靜態(tài)Excel圖表。要為你的項(xiàng)目選擇合適的繪圖工具，你需要考慮很多因素。下面就由小編為您帶來12個(gè)超炫數(shù)據(jù)可視化工具，這些工具將使您無需花費(fèi)大量時(shí)間與數(shù)據(jù)作斗爭(zhēng)，而是能夠很容易地繪制出漂亮的圖表。

億信ABI

3.0

23條點(diǎn)評(píng)

咨詢產(chǎn)品

免費(fèi)試用

解決用戶選型困難的好軟件，有各維度的信息

客戶案例

4

合作品牌

51

  雖然本文推薦的工具是為網(wǎng)頁開發(fā)者設(shè)計(jì)的，但也有一些開發(fā)者不需要寫代碼就能使用。許多工具都提供了豐富的交互式示例，即使是初學(xué)者也可以通過修改代碼輕松地創(chuàng)建定制圖表。

1.Google Charts

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

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

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

2.MetricsGraphics

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

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

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

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

3.FusionCharts

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

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

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

4.Epoch

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

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

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

5.ECharts

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

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

6.D3.js

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

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

7.Sigma

跟12個(gè)超炫數(shù)據(jù)可視化工具相比，Sigma 有著自己獨(dú)特的定位，那就是圖模型的繪制。它基于 Canvas 和 WebGL 開發(fā)并提供了公開的 API。所以你可以在GitHub 上找到社區(qū)貢獻(xiàn)的許多插件。

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

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

8.Highcharts

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

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

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

9.dc.js

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

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

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

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

10.dygraphs

由 Google 開發(fā)的 dygraphs 絕對(duì)是繪圖工具中的明星。到現(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)建、分享和保存數(shù)據(jù)可視化圖標(biāo)的庫(kù)。它由許多部件組成，其中一些能夠在不需要寫代碼的前提下達(dá)到與 d3 競(jìng)爭(zhēng)的水平。Vega 能夠把 JSON 數(shù)據(jù)轉(zhuǎn)換成 SVG 或 HTML5 圖表。雖然這沒什么了不起的，但它把這一步做的很踏實(shí)。

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

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

12.NVD3

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

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

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

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

  做出一個(gè)好的圖表并不容易。過濾數(shù)據(jù)、統(tǒng)計(jì)數(shù)據(jù)、設(shè)計(jì)布局以及顯示數(shù)據(jù)或許會(huì)花費(fèi)很長(zhǎng)的時(shí)間，但使用這7種數(shù)據(jù)可視化工具，基本上能在30分鐘內(nèi)生成漂亮而高效的數(shù)據(jù)圖表，從而大大提高工作效率。最終選擇一個(gè)數(shù)據(jù)可視化工具，現(xiàn)在就開始嘗試吧，也許它不像你想的那樣困難。  以上就是小編為您介紹的12個(gè)超炫數(shù)據(jù)可視化工具，希望對(duì)您有所幫助