歡迎光臨
每天分享高質量文章

12個資料可視化工具,人人都能做出超炫圖表

導語:今天我們帶來一篇來自 Adobe 工程師 Rohit Boggarapu 的文章。他在文章中介紹了一些適合網頁開發者的資料可視化和繪圖工具,讓你不必再花大力氣與枯燥的資料抗爭。部分工具不要求寫代碼也可以使用!

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

沒有哪個網頁開發者會喜歡電子錶格。好訊息是,現在我們有了許多更加優雅的方式來呈現資料,再也沒有必要使用靜態的 Excel 圖表了。

在為你的專案選擇合適的繪圖工具時,要考慮到許多事情。本文將為你分析適合網頁開發者的 12 個最好的工具,讓你不再花費大把時間跟資料做鬥爭,而是開始輕鬆地繪製漂亮的圖表。雖然本文推薦的工具是面向網頁開發者的,但其中一些並不需要會寫代碼就能使用。許多工具都有著豐富的交互式例子,即使是新手也能輕鬆地通過改動代碼來創建自定義圖表。

1. Google Charts

文件和幫助信息豐富的 Google Charts 對於剛剛入門 JavaScript 繪圖的人來說是極佳的選擇。它的文件里到處都是帶註釋的代碼和逐步的講解,可以直接用來把 HTML5 / SVG 圖標嵌入到你的網頁中。

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

適合人群:追求靈活性和良好文件的嚴肅開發者。

2. MetricsGraphics

MetricsGraphics 是一個在 D3.js 的基礎上專為可視化時間序列資料而開發的繪圖庫。雖然它只支持線圖、散點圖、柱狀圖、直方圖和資料表格,但它在這幾類圖表上的表現非常強。

跟 Google Charts 一樣(MetricsGraphics 是 Mozilla 的產品),豐富的文件和例子使得它很容易上手。比如這個非常有趣的關於 UFO 目擊事件的交互式例子。

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

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

3. FusionCharts

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

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

適合人群:需要各種不同種類的易自定義圖表的開發者。

4. Epoch

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

對普通資料和實時資料,Epoch 都支持 5 種圖表型別。這個數量並不能與 FusionCharts 或是 Highcharts 這種特性完整的產品對抗,但它所專長的是以簡單和友好的方式呈現實時資料。

適合人群:需要簡單靈活的實時資料呈現方案的開發者。

5. ECharts

百度的 ECharts 是一個很棒的工具,它支持在繪製完資料後再對其進行操作。這個被稱為 Drag-Recalculate 的特性使得用戶可以在圖表之間拖動一部分的資料並得到實時的反饋。同時,ECharts 是專為繪製大量資料設計的。它可以瞬間在二維平面上繪製出 20 萬個點,並用專為 ECharts 開發的輕量級 Canvas 庫 ZRender 使資料動起來。

你可以在這裡對上圖進行操作,來體驗 ECharts 所提供的特性。

適合人群:想儘量避免寫代碼並有實時資料操作需求的開發者。

6. D3.js

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

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

7. Sigma

跟上面已經提到過的工具相比,Sigma 有著自己獨特的定位,那就是圖模型的繪製。它基於 Canvas 和 WebGL 開發並提供了公開的 API。所以你可以在 GitHub 上找到社區貢獻的許多插件。舉例來說,你可以用 Sigma.js 畫出這樣的圖:

Sigma 同時也是響應式的,並支持觸屏。開發者很容易添加新的功能以及精細地控制邊和頂點的規格。

適合人群:需要專為繪製圖模型設計的強大工具的開發者。

8. Highcharts

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

Highcharts 對於非商業使用是免費的,而商業許可的價格是一份 590 美元(附帶技術支持)。

這是一個用它繪製的例子:

適合人群:需要在技術支持的幫助下繪製各種複雜的圖表的開發者。

9. dc.js

dc.js 是一個開源的 JavaScript 繪圖庫。它非常適合用來創建交互式的儀錶盤(Dashboard)。圖表之間是有聯繫的,所以當你與其中一個部分進行交互時,其他部分都會做出實時的反饋。這是一個例子:

除了一些在線課程以外,你可以通過各種例子來學習使用這個庫。等你照著文件動手一遍以後就有能力創建自己的圖表了。

雖然 dc.js 並沒有像 ECharts 或是 Google Charts 那樣豐富的功能,但它在自己的賣點——易於呈現和探索巨量的維度資料集上做的非常好。

適合人群:需要為關係型圖表創建一個儀錶盤的開發者。

10. dygraphs

由 Google 開發的 dygraphs 絕對是繪圖工具中的明星。到現在 Google Correlate 還在使用它(當然,在設計上經過了一些調整)。它可以被用於繪圖密集的專案,因為它能在不影響性能的情況下輕鬆地繪製幾百萬個資料點,這在很大程度上彌補了它那過於朴素的審美設計。

從一開始作為 Google 的一個內部專案到最後公開發佈,dygraphs 一直有著活躍的社區支持。同時它也在 GitHub 上開源。

適合人群:需要有著活躍支持的專為繪製海量資料集設計的工具的開發者。

11. Vega

Vega 是一個基於 d3.js 的用於創建、分享和儲存可視化圖標的庫。它由許多部件組成,其中一些能夠在不需要寫代碼的前提下達到與 d3 競爭的水平。Vega 能夠把 JSON 資料轉換成 SVG 或 HTML5 圖表。雖然這沒什麼了不起的,但它把這一步做的很踏實。

因為使用 Vega 不需要寫任何代碼(只要會編輯 JSON 檔案即可),它是一個很好的 d3 替代品,能在降低使用複雜度的同時保留 d3 的特性。

適合人群:需要 d3 強大的特性又不希望從頭學起的開發者。

12. NVD3

最後介紹的工具也是基於 d3.js 的。作為繪圖界的佼佼者,NVD3 是由一系列部件組成的,允許開發者創建可重用的圖標。你可以在它的網站上找到許多 demo 和對應的代碼。這也是上手 NVD3 的最佳方式。

你可以看到,NVD3 的審美風格要比 d3.js 更為精緻一點。

它支持 11 種圖表型別,包括區域圖、線圖、柱狀圖、氣泡圖、餅狀圖和散點圖。同時也支持所有現代瀏覽器以及 IE 10 以後的版本。

適合人群:熟悉 d3 並想要可重用圖表的開發者。

文:Rohit Boggarapu

來源:優達學城

精彩活動

福利 · 閱讀 | 免費申請讀大資料新書 第23期

推薦閱讀

2017年資料可視化的七大趨勢! 

全球100款大資料工具彙總(前50款) 

論大資料的十大局限

大資料時代的10個重大變革

大資料七大趨勢 第一個趨勢是物聯網


Q: 你還在用哪些好用的資料可視化工具?

歡迎留言與大家分享

請把這篇文章分享給你的朋友

轉載 / 投稿請聯繫:hzzy@hzbook.com

更多精彩文章,請在公眾號後臺點擊“歷史文章”查看

赞(0)

分享創造快樂