https://blog.csdn.net/olevin/article/details/51296470
1canvas
HTML5 canvas也有相應的JS庫。我用過並感覺不錯的有如下一些：
- flot, 我第一個使用的canvas庫。基於jquery，支持有限的視覺形式（折線、條形、面積、點）和縮放等動畫效果，簡單易用。
- RGraph，我第二個使用的canvas庫。有優秀的動畫效果，特點是有大量的傳統統計圖的例子，並且很容易對這些例子做定製。
- chartJS, 該庫將很多基本統計圖的實現方法封裝起來，只要通過簡單調用即可以實現。這貨的優點就是簡單易用，不過如果要做深度定製恐怕還不太夠用。
- kineticJS, 是近來來canvas類庫中的新秀。這個庫的優點是在處理大量對象的時候很快，因爲使用了多canvas技術。在它的官網上甚至能找到很多類似與flash動畫的例子。另外它的教程不錯。考慮到其他庫很多時候依賴例子定製，而這個文檔寫的好對於自主設計更有效，可能是目前最強的庫。
- porcessingJS, 它是著名的Processing語言的一個接口，用processing的語法以canvas進行繪圖，之後講processing的時候還會講到。優點是自由度大，缺點是沒有預定義模版，你可能需要到處找一些例子來學習。
- Echart, 一個由百度前端發起的canvas國產類庫。這個echart其實是在canvas類庫zrender的基礎上做的主題圖庫，優點有數據驅動，圖例豐富，功能強大，支持數據拖拽重計算，數據區域漫遊，全中文文檔非常過癮。跟同樣是國產的前端腳手架fis一樣（官網http://fis.baidu.com/），都是誠意滿滿的國產套餐，體現了現今國內不俗的前端開發實力。我試用後感覺非常好，在我參與的一些項目中直接採用。關於我使用經驗參見：百度數據可視化圖表套件echart實戰
- 最後再說說canvas這個技術本身的優缺點：
缺點：
- 只能繪製2D圖像，暫時不支持3D圖像。
- canvas繪製圖形出並非可以直接操作的dom對象。如果要對其進行類似dom的操作，例如添加屬性等等，比較麻煩（這就是爲什麼必須使用類庫）。
優點：
- 由於canvas繪圖不會給每個點生成對象，所以繪製速度快，消耗內存少。（這點主要是相對於SVG，VML技術而言）
- 兼容性較好。除了IE6，其他瀏覽器都可以支持。（IE7，8需要載入擴展JS，終究還是能用的）
SVG最大的優點就是繪製和控制簡單。直接在html頁面里加入xml語句就可以編輯繪製。例如下面的代碼就是畫一個圓、一個橢圓和一道黑線，把這段代碼另存爲一個html文檔再用谷歌瀏覽器打開就能看到效果了：
<html> <svg> <circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2" /> <ellipse cx="250" cy="250" rx="100" ry="200" fill="yellow"/> <line x1="0" y1="0" x2="500" y2="50" stroke="black"/> </svg> </html>
跟前文中canvas繪圖的方式比一比，就知道SVG是多麼容易控制了。
當然，使用SVG時我們通常也是使用類庫來提升效率。這裏的類庫主要有三種：
- highcharts.JS, 在現代瀏覽器中使用SVG繪圖，在IE6，7，8中用VML繪圖。包含一堆預定義的圖表和樣式。唯一的問題是，這貨收費。只對非商業用途免費。
- raphael.js，以著名畫家拉斐爾之名命名的繪圖JS庫，跟highcharts類似，也是SVG + VML兼容性方案。 但它是開源的，應用也比較廣泛。使用它的時候有必要再下一個gRaphael圖表庫作爲參考。
- D3.js，D3js是應用在web開發上的開源JS組件庫，是一個數據可視化工具。D3應用的最爲廣泛，不過只支持SVG，我會重點講述。
D3的全稱是Data-Driven Documents(數據驅動文檔)，在github上關注數量超過了2萬人（超過了所有canvas類庫的關注數量），是非常受歡迎的開源工具。使用d3的有開發者，有設計師，有藝術家，資料非常豐富（雖然中文的很少）。關於D3的我的應用案例可以見我之前的文章《D3js初探及數據可視化案例設計實戰》。
那麼接着說說D3的優缺點（基本上也就是SVG的優缺點）：
優點：
- D3最大的優點在於其資料豐富，案例非常多。這是真的是一個極大的優點。
- SVG矢量圖形的特點是無損縮放，這個優勢在顯示2D圖形式會有非常好的效果，並且兼容各種分辨率。
- SVG圖形的節點可以像dom元素一樣控制，這就讓自主創作圖形變得更容易。相對於canvas這也是非常大的優勢。
缺點；
- SVG是2D矢量圖，不能畫3D圖形。（用2D矢量可以畫很多帶透視效果的僞3D圖，那並不是真正的3D圖！）
- d3.不支持IE6，7，8。如果想要IE8使用d3，請用r2d3.js（一個結合了 Raphael.js的擴展庫）。Raphael.js是一個跨瀏覽器的矢量圖形庫，它實現IE6，7，8兼容的方法是：在IE6，7，8中使用VML，在其他瀏覽器中使用SVG。另外，如果圖形複雜，就不要指望用Raphael.js在IE上能跟D3畫出一樣酷炫的效果。
- SVG的節點都是對象，非常佔用內存。例如論壇裏一個朋友使用d3繪製超過12000個節點的圖，直接導致每個試圖打開它的瀏覽器都崩潰了。這個時候如果不願意做簡化那麼應該試試canvas繪圖。
3. webGL
前面說的繪圖技術，無論canvas還是SVG都不能繪製3D圖形。我曾經見過很多在網頁上顯示3d圖形的方案，但都需要你的電腦上安裝相應的插件（例如flash， silverlight）或者事先安裝虛擬機(例如java）。之前曾經有過很多web 3D渲染技術，但不是要下插件，就是編程複雜，於是漸漸被時代淘汰，例如VRML，約翰•卡馬克已經宣佈了它的死亡。難道就沒有一個開源的通用標準顯示3D圖形嗎？
當然是有的。這貨叫webGL, 是一項使用JavaScript實現3D繪圖的技術，瀏覽器無需插件支持，Web開發者直接使用js調用相關API就能借助系統顯卡（GPU）進行編寫代碼從而呈現3D場景和對象。
WebGL標準由科納斯組織（Khronos Group）開發和維護，Google、Mozilla、Opera和Apple 等瀏覽器廠商都是其中的成員，爲這一標準做出了顯著貢獻。從名稱上我們就可以知道WebGL跟openGL肯定是小弟與大哥的關係。事實上webGL是基於OpenGL ES 2.0開發的，OpenGL ES 是 OpenGL 三維圖形 API 的子集，針對手機、平板電腦和遊戲主機等嵌入式設備而設計。瀏覽器內核通過對OpenGL API的封裝，實現了通過JavaScript調用3D的能力。WebGL 內容作爲 HTML5 中的Canvas標籤的特殊上下文實現在瀏覽器中（這下canvas終於可以畫3D圖了，雖然用的是不同技術）。
webGL的各大瀏覽器支持情況（截至2013年11月）：
桌面瀏覽器
- Mozilla Firefox 4+
- Google Chrome 8+
- Internet Explorer 11+
- Safari 5.1+
- Opera 12+
移動瀏覽器
- Firefox 25+
- Google Chrome 31+
- Opera Mobile 12+
- Android Browser 暫不支持
- iOS Safari暫不支持
- IE Mobile 暫不支持
從上面的支持情況列表我們可以發現，支持情況還是比較可喜的，至少現代瀏覽器都支持，移動端和IE略有落後。不過畢竟這個技術還是新鮮事物，在國內能找到的資料還很少，國內前端技術圈討論也不多，是真正的技術藍海。本人並沒有實際開發過webGL程序，目前還停留在觀察階段。若有工作需求，會將其列入研究重點。
讓我們查看一些webGL的案例，當然是mozilla demostudio的最好。
最後，讓我們提一提webGL的JS框架，它們可以減少工作量並提供一些有趣的例子。
- philoGL，專注於3D可視化的一個webGL框架。
- threee.js, 谷歌團隊Data Arts出品的基於webGL的3D場景庫，它的演示十分有趣。
5.java & processing
processing是久負盛名的爲了實現交互式可視化創作的Java語言擴展，我在《Benjamin Fry的《可視化數據》和processing語言》一文中有過介紹。不過我並沒有直接用過processing，而只用過processingJS, 一個使用processing語法的使用html5 canvas繪圖的JS類庫。在前文中已經有過推介。
6. R
R語言之前我已經多次提到了。這段時間我也開始試用，不過說句實話這個東西我覺得不能稱爲語言，我感覺它不像C++，更像mathlab這樣的應用程序。它的圖標很簡陋，GUI更簡陋，簡直除了控制檯再沒有別的了。我想這是製作它的統計學家的心聲：科學不是花裏胡哨的玩意，它其實很枯燥，但很注重內在美！