JavaScript圖形庫

作前端少不了畫圖，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/ 。learining threejs ：http://learningthreejs.com/，中文教程：http://techbrood.com/threejs/docs/ 。 其餘示例：http://alteredqualia.com/three/examples/materials_cubemap_escher.html   ，https://floorplanner.com/pro ，http://exocortex.com/  ，WebGL 學習教程：https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-fundamentals.html

還能夠模擬分子模型，固然，你能想到的 3D 模型，threejs 幾乎都能作到。可是 threejs 的交互功能並非很完善。

4.D3.js：https://d3js.org/，更傾向於二位數據圖表的繪製，是一個很強大的用戶自定義結構的工具。學習D3：http://d3.decembercafe.org/index.html

5.mapbox.js,能夠建立各類自定義地圖，二維的世界地圖、各省市地圖均可以繪製成功。https://www.mapbox.com/maps/  。它還有一個客戶端繪製軟件：https://tilemill-project.github.io/tilemill/

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  固然，這些其餘庫我還沒用過。

 16.其餘3D 圖形庫：SceneJS、PhiloJS等。Google 的 webGL 示例庫：https://experiments.withgoogle.com/

17.推薦幾個思惟導圖軟件：https://www.zhihu.com/question/19622223?sort=created，還有processOn