數(shù)據(jù)可視化主要分為可視化工具(在線生成圖類)以及可視化工具庫(kù),以下主要為免費(fèi)開放給開發(fā)者的工具庫(kù)。
目前 Web 端評(píng)價(jià)最高的 Javascript 可視化工具庫(kù)
實(shí)例豐富,提供大量線性圖和條形圖之外的復(fù)雜圖表樣式( Voronoi 圖、圓形集群等)
易于實(shí)現(xiàn)調(diào)試數(shù)據(jù)
能夠通過擴(kuò)展實(shí)現(xiàn)任何可以想到的數(shù)據(jù)可視化效果
與 jQuery 類似,D3 直接對(duì) DOM 進(jìn)行操作,這是它與其它可視化工具的主要區(qū)別所在:它會(huì)設(shè)置單獨(dú)的對(duì)象以及功能集,并通過標(biāo)準(zhǔn) API 進(jìn)行 DOM 調(diào)用。
學(xué)習(xí)曲線太過嚴(yán)苛
數(shù)據(jù)“生命周期模式”不夠直觀
要達(dá)到理想使用效果需要用戶深入理解JavaScript
demos:https://github.com/d3/d3/wiki/Gallery
想要的基本都能實(shí)現(xiàn)(取決于開發(fā)者)
Echarts
實(shí)例較豐富,相對(duì)于d3來(lái)說(shuō)少
母語(yǔ)文檔和支持
使用非常方便
功能相對(duì)于上面的頂級(jí)圖表來(lái)說(shuō)還相對(duì)較弱
echarts3.0:http://echarts.baidu.com/
基礎(chǔ)圖形都有,地圖也有(擴(kuò)展不多)。提供很多參數(shù)接口,但是不能自己定義新的圖形樣式。
infoVis
支持WebGL
和D3框架配合,infovis也提供了鏈?zhǔn)椒椒▉?lái)操作DOM
demo少
demos:http://philogb.github.io/jit/demos.html
Cesium
專注于地理數(shù)據(jù)可視化,可以在 Web 瀏覽器中繪制 3D/2D 地球。
無(wú)需任何插件即可基于 WebGL 來(lái)進(jìn)行硬件加速。
跨平臺(tái)、跨瀏覽器
本身基于 Apache 開源協(xié)議,支持商業(yè)及非商業(yè)項(xiàng)目。
不好看&慢
demos:http://cesiumjs.org/demos.html
Highcharts
類庫(kù)大小:超輕量級(jí),并且性能非常好,支持所有瀏覽器,但對(duì)于不同設(shè)備性能不太一樣
價(jià)格: 初始價(jià)格對(duì)于個(gè)人開發(fā)者或者小團(tuán)隊(duì)來(lái)說(shuō)價(jià)格很低
瀏覽器支持:老式瀏覽器和現(xiàn)代瀏覽器都支持的非常好
個(gè)人支持: 一般的問題好解決,但是一旦遇到了關(guān)鍵問題,個(gè)人支持非常有限
支持圖形: 支持圖形相對(duì)于fusioncharts來(lái)說(shuō),比較少
demos:http://www.highcharts.com/demo
和echarts差不多,地圖比echarts好,但也只是靜態(tài)展示。
Fusioncharts
支持不同類型圖表: 如果需要各種類型圖標(biāo), Fusioncharts都沒有問題,提供了90多種圖表和965種地圖自定義并且有實(shí)際例子:自定義非常簡(jiǎn)單,包含了很多直接可以使用的例子,并且擁有很大的庫(kù)
封裝器和插件: 提供了官方的封裝器和插件
瀏覽器和設(shè)備支持: 支持所有瀏覽器(IE6)和設(shè)備
高級(jí)特性: 提供了很多高級(jí)特性,宏,可編輯圖表
個(gè)人支持:得到的支持非常快
體積: 非常重,如果是基于web的應(yīng)用會(huì)成問題,但是App會(huì)好些
價(jià)格: 價(jià)格相對(duì)于前面有些貴
可跨平臺(tái)、跨瀏覽器的 Flash 圖表解決方案,不推薦,因?yàn)楣俜絛emo加載都很慢。
AnyChart
基于 Flash/JavaScript(HTML5) 的圖表解決方案
可以輕松地跨瀏覽器、跨平臺(tái)工作
可以通過 XML 格式獲取數(shù)據(jù),該方式讓開發(fā)人員非常靈活地控制圖表上的每一個(gè)數(shù)據(jù)點(diǎn),而當(dāng)圖表數(shù)據(jù)點(diǎn)數(shù)量偏大時(shí),則可以采用 CSV 數(shù)據(jù)輸入,減小數(shù)據(jù)文件大小和圖表加載時(shí)間。
支持圖形少,沒有地圖類
收費(fèi)……(交互式圖表和儀表功能)
demos:http://www.anychart.com/
amCharts
好看
基礎(chǔ)類圖表都有
可以免費(fèi)使用,但是會(huì)有網(wǎng)址鏈接。如果想消除網(wǎng)址鏈接,需要付費(fèi)。
地圖類交互少。
demos:https://www.amcharts.com/demos/
Chart.js
簡(jiǎn)單、面向?qū)ο螅瑸樵O(shè)計(jì)和開發(fā)者準(zhǔn)備的圖表繪制工具庫(kù)
基于 Html5,響應(yīng)式,支持所有現(xiàn)代瀏覽器
輕量級(jí),且支持模塊化,即開發(fā)者可以拆分 Chart.js 僅引入自己需要的部分進(jìn)入工程
只有六種基礎(chǔ)圖表類型
demos:http://www.chartjs.org/docs/#doughnut-pie-chart-introduction
Chartist.js
在工程中,Chartist.js 的 CSS 和 JavaScript 分離,因此代碼比較簡(jiǎn)潔,在應(yīng)用時(shí)配置流程十分簡(jiǎn)單
生成的是響應(yīng)式圖表,可以自動(dòng)支持不同的瀏覽器尺寸和分辨率
只有6-種基礎(chǔ)圖表類型
demos:https://gionkunz.github.io/chartist-js/examples.html
Google Chart
非常容易修改使用的DOM
定義定制的方法非常簡(jiǎn)單
界面可用性及其來(lái)自GDC(Google developers console)的開源網(wǎng)絡(luò)支持
官方demo較少
demos:http://developers.google.com/chart/
沒什么人用的感覺,查到的東西基本上在10年以前了。不推薦。
Leaflet
可以同時(shí)良好運(yùn)行于桌面和移動(dòng)端的 Javascript 可交互地圖庫(kù)
使用 OpenStreetMap 的數(shù)據(jù),并把可視化數(shù)據(jù)集中在一起
內(nèi)核庫(kù)很小,但由豐富的插件可以大幅拓展其功能,常常被用于需要展示地理位置的項(xiàng)目。
demos:http://leafletjs.com/
Dygraphs
基本上都是線圖
demos:http://dygraphs.com/gallery/#g/resize
放大時(shí)間段查看數(shù)據(jù)點(diǎn)的交互很棒
icharts
iCharts 有交互元素,可以從 Google Doc、Excel 表單和其他來(lái)源中獲取數(shù)據(jù)。
免費(fèi)版只允許你用基本的圖表類型
demos:http://icharts.net/solutions/business-analytics-reporting
three表示3D的意思,js表示javascript的意思。
three.js就是使用javascript來(lái)寫3D程序的意思。
Three.js本質(zhì)上是Webgl。
支持Webgl的瀏覽器很多(Chrome、FireFox、360安全瀏覽器6.0等)
IE瀏覽器對(duì)Webgl標(biāo)準(zhǔn)的支持就不太好。
基于WebGL、HTML5和JavaScript的開源3D游戲引擎
配合Babylon.js,開發(fā)者可以更方便快捷地完成光線、輪船紋理、海浪等的3D建模。
專門做游戲的框架
陳路:之前研究過這一堆開源庫(kù),three.js/sigma.js基本上可以滿足需求了
a JavaScript librarydedicated to graph drawing.
一個(gè)開源的輕量級(jí) JS 庫(kù),用來(lái)繪制各種圖形,使用的是 HTML Canvas 元素。
It makes easy to publish networks on Web pages, and allows developers to integrate network exploration in rich Web applications.
Canvas
intended to provide some data visualizations based on geographical data.
SVG-based, can scale to any screen size, and includes everything inside of 1 script file.
It heavily relies on the amazingD3.jslibrary.
D3基礎(chǔ)上開發(fā)
GeoJson&TopoJson
基于 JSON 語(yǔ)法的
對(duì)地理數(shù)據(jù)結(jié)構(gòu)進(jìn)行編碼的格式
D3.js 的作者認(rèn)為 GeoJSON 不太好,比較推崇 TopoJSON 格式。
TopoJSON 似乎只在 D3.js 中比較廣泛的使用,還不是世界范圍內(nèi)認(rèn)可的格式。
TopoJSON 與 GeoJSON 相比,文件大小縮小了 80%
一個(gè)教程:創(chuàng)建航班模擬圖
D3/TopoJSON/SVG
D3.js Animated Map Visualization
關(guān)于一個(gè)大屏幕項(xiàng)目:模擬了如何連接兩個(gè)點(diǎn)
D3/Datamaps
Geography of Jobs: animated mapping with D3
介紹一個(gè)D3實(shí)現(xiàn)的項(xiàng)目:多年來(lái),失業(yè)和就業(yè)的動(dòng)態(tài)關(guān)系
一個(gè)開源項(xiàng)目:An easy way to animate SVG elements.
動(dòng)態(tài)描繪SVG(只支持line、path、polyline)