JavaScript圖形庫

標籤：article   互動   graphics   建模工具   exp   jqplot   org   三維   定製   

做前端少不了畫圖，html5 的 canva 很強大，可是如果所有需求都自己畫圖，恐怕會被 leader 炒掉。記錄一下我用過的幾個 2D 和 3D 的js圖形庫，各種功能。我就不分 2D 和 3D 了，因為 WebGL前端資料視覺效果是一個很熱門的方向，發展趨勢，也是很多圖形庫的發展目標。

1.echarts：百度開源的功能很多的圖形庫。看一下的 demo 就知道它的功能了。http://echarts.baidu.com/examples.html 。可以滿足基本的二維資料圖表的繪製，簡單方便。

 

2.echarts-gl:百度開源的功能很多的GL(3D)圖形庫。的 demo。http://echarts.baidu.com/examples.html 。可以滿足基本的二維資料圖表的繪製，簡單方便。http://gallery.echartsjs.com/explore.html#tags=echarts-gl~sort=rank~timeframe=all~author=all 。畫地球儀、3D 百度地圖什麼的，很好用。還可以結合 Web AudioContext ,結合音頻資料，做出很炫酷的效果。

 

3.threejs :一個開源的web 3D 工具，還開源了 threejs editor ，是個簡化版的建模工具。threejs 樣本 https://threejs.org/ ，threejs editor 樣本：http://mrdoob.com/

還可以類比分子模型，當然，你能想到的 3D 模型，threejs 幾乎都能做到。但是 threejs 的互動功能並不是很完善。

4.D3.js：https://d3js.org/，更傾向於二位元據圖表的繪製，是一個很強大的使用者自訂結構的工具。

5.mapbox.js,可以建立各種自訂地圖，二維的世界地圖、各省市地圖都可以繪製成功。https://www.mapbox.com/maps/

6.mapbox-gl.js，就是 3D 的地圖繪製，資料和行為之間的互動做的很好，其實 echarts-gl 和.mapbox-gl 結合可以做出更炫酷的效果，詳情見：.http://gallery.echartsjs.com/editor.html?c=xrJHCfsfE-  。

7. cytoscape.js   http://js.cytoscape.org/ ，很適合繪製二維的社交節點關係圖、神經網路節點關係圖，反正涉及到節點的圖表都可以試試這個圖形庫，當然這庫還有其他的優點哈，比中各節點的動態互動就做的很棒棒。

8.amcharts，一個部分開源的工具，可以繪製二維的折線圖、柱狀圖、餅圖、地圖、股票趨勢圖、儀錶圖等，當然還可以繪製三維的餅圖、柱狀圖等。但是非開源，表徵圖上方會有浮水印，工具好用。https://www.amcharts.com/demos/

9.highcharts，功能很多，滿足基本的資料展示需求，國內用的很多。

10.GraphicsJS ： http://www.graphicsjs.org/  ，就不多說了，可以自己看官網瞭解。

11.阿里的G2可以讓使用者通過簡單的文法搭建出無數種圖表，並且整合了大量的統計工具，支援多種座標系繪製，可以讓使用者自由得定製圖表，是為大資料時代而準備的強大的視覺化檢視。也可以看看阿里的DataV，貌似是付費的。

12.raphael.js  ： https://dmitrybaranovskiy.github.io/raphael/  

13.BabylonJS：微軟加的 3D 圖形引擎工具，不過是typescript 寫的，很好用。建模效果很逼真。http://www.babylonjs.com/

14.Stardust，https://stardustjs.github.io/，基於CPU的可視化圖形庫。

15.其他庫：okaycharts、fusioncharts、xCharts、Flotr、RGraph、ichartjs、ChartJS、rickshaw、jqplot、rgraph、digraphs、canvasxpress、graphael、 Awesome Chart JS ，大家可以看看這篇：http://blog.csdn.net/github_36111469/article/details/53345664  當然，這些其他庫我還沒用過。

 

JavaScript圖形庫