為一名前端攻城獅，Canvas 和 SVG 對于我們并不陌生，canvas 是 HTML5 提供的新元素，而 svg 存在的時間要比 canvas 長很多，svg 并不屬于 html，最初的 svg 是由 XML 定義的，在 html 5 中 canvas 與 svg 看著相似，其實不同。

一、基本介紹

Canvas

• 通過 js 來繪制 2D圖形。
• canvas 圖像單位是像素。
• canvas 圖像繪制完畢之后，瀏覽器將不再關注它，如果位置發(fā)生變換，就需要重新繪制。

SVG

• svg 使用 XML 描述的2D圖像。
• svg 是基于 xml 的，所以 svg 中繪制圖形還是使用的元素，js 給元素任意添加事件。
• svg 繪制的圖像是一個對象，如果對象的屬性發(fā)生改變，瀏覽器將重新繪制圖形。

二、SVG與Canvas比較

1. svg 是一種矢量圖，而 canvas 依賴于分辨率。所以 svg 放大不會失真，但是 canvas 繪制的圖形會失真。
2. svg 支持事件處理器，而 canvas 不支持事件處理器。
3. svg 中的文字獨立于圖像，文字可保留，可編輯和可搜索，canvas 的文本渲染能力弱。
4. canvas 適合圖像密集型的游戲，頻繁地重繪圖像，svg 繪制的復雜度高時減慢渲染的速度。
5. canvas 繪制的圖形可以多種格式 (jpg、png) 保存圖片，但是 svg 繪制的只能以 .svg 格式保存，使用時可以引入 html 文件。
6. canvas 適合開發(fā)游戲，svg 不適合游戲應用。

二、如何應用

2.1、功能上來說

canvas 是一個畫布，繪制出來的圖形是位圖，因此 canvas 可以繪制圖片，在實際應用中，由于渲染性能高，所以大型游戲開發(fā)都用的 canvas 。除此之外，還有統(tǒng)計中常見的柱狀圖、餅圖、雷達圖等也使用的 canvas 。而 svg 繪制的是矢量圖，放大后不會失真，所以很適合做地圖。

2.2、操作方面講

canvas 繪制的圖形，只能給 canvas 整個畫布添加事件，而不能給某個圖形或文件添加事件處理器，但是 svg 支持事件綁定，如果需要添加帶有事件的動畫效果時，就需要選擇 svg。

凡是互聯(lián)網(wǎng)工作者都會在Excel或者Word文檔中使用并制作過統(tǒng)計圖，統(tǒng)計圖不僅可以幫助我們從數(shù)據(jù)中提取信息，為預測和決策作依據(jù)，也能讓我們把信息提供或者傳達給給其他人。

用Excel制作統(tǒng)計圖在數(shù)據(jù)量不大的情況下當然是沒問題的，但是，當企業(yè)的業(yè)務數(shù)據(jù)越來越多的時候，需要從時間、地點、欄目等各個維度來進行數(shù)據(jù)分析的時候，你會發(fā)現(xiàn)Excel開始拖累你的工作。在眾多的BI工具測評中，好友力薦的一站式數(shù)據(jù)分析工具——億信ABI獨獨吸引了我的眼球，要問原因？別的不多說了，但就統(tǒng)計圖方面來講，以下四點可以概括：

1、支持WEB上的動態(tài)統(tǒng)計圖設計

允許用戶即席定義、編輯各種統(tǒng)計圖，用戶只需通過鼠標簡單的拖拽操作就能實現(xiàn)數(shù)據(jù)的分析展現(xiàn)，操作界面跟excel界面極其類似，能很方便定義各種復雜的統(tǒng)計圖。

2、提供豐富的統(tǒng)計圖類型

柱狀圖、線狀圖、K線圖、箱狀圖、條形圖、面積圖、餅圖、點圖、儀表盤、雷達圖、散點圖、氣泡圖、數(shù)學公式圖、預測曲線圖，正態(tài)分布圖，走勢圖……

3、支持多種圖形風格

2D、3D、Excel、Web、Html5、Fasion、Flash風格。

4、支持統(tǒng)計圖熱點鉆取

支持數(shù)據(jù)點、系列、圖例等熱點鉆取，且定義簡單快捷。

如何生成統(tǒng)計圖

1、統(tǒng)計圖的制作流程

雖然統(tǒng)計圖的類型和風格各異，但是它們的制作過程確實簡單、一致：

2、準備分析數(shù)據(jù)

創(chuàng)建分析表，產(chǎn)生制作統(tǒng)計圖需要的分析表數(shù)據(jù)，具體方法請參考上一篇文章《報表分析怎么做？這篇文明明白白告訴你》。

3、添加統(tǒng)計圖

新建一張報表模板或者編輯已經(jīng)創(chuàng)建的報表模板，在左邊工具欄下的【統(tǒng)計圖組件】中將統(tǒng)計圖拖入報表模板空白處，完成相關設置后即可在當前的報表模板中插入統(tǒng)計圖。

4、定義顯示模型

如下圖所示：

5、設置數(shù)據(jù)源

通過下圖中的系列選擇，設置當前統(tǒng)計圖是一個系列還是多個系列；通過數(shù)據(jù)點設置 設置圖上每個系列上數(shù)據(jù)對應的來源。下圖列出的是固定系列數(shù)據(jù)點設置，若是浮動系列，數(shù)據(jù)點的設置界面又有些區(qū)別。

6、特殊效果設置

通過上述步驟完成統(tǒng)計圖的基本設置后，通過下圖框中的地方可以設置比如統(tǒng)計圖的標題、背景墻壁、左軸、底軸等特殊效果。

最后保存統(tǒng)計圖所在的分析表，計算，即可看到根據(jù)系統(tǒng)設置生成的統(tǒng)計圖。

ABI是億信華辰在十多年的數(shù)據(jù)分析、報表處理基礎上，運用了先進的數(shù)據(jù)倉庫、商務智能核心理論，新打造了一款集數(shù)據(jù)采集、處理、分析和展示為一體的平臺。

個企業(yè)在做重要決定時都傾向于做數(shù)據(jù)分析，實際上他們很多時候都是沉淪在數(shù)據(jù)里頭，不知道如何跳出其中。企業(yè)一直尋求更好的方式來可視化數(shù)據(jù)、進行更好的互動、使圖表多角度化。畢竟，只有從數(shù)據(jù)中得出的見解才是有用的。

JavaScript 圖表庫出現(xiàn)了，作為美觀且容易理解的交互式的可視化圖表最有力的工具，它更容易提取和傳達關鍵的模式和見解，而這一點在靜態(tài)圖表中往往不明顯。

為了使事情更加簡單，我努力挖掘了很多選項，找到了最好的JavaScript 圖表庫。來，讓我們開始吧。

1、chartist

Chartist的高效和人性化設計甚至吸引了離開 Excel 就會感覺不舒服的人。可響應（使用媒體查詢）和獨立 DPI 意味著這些圖表可以為你提供一個良好的解決方案，如果你在考慮將你的圖表應用于包括手機，平板和桌面電腦的多終端設備，基于SVG的設計讓它在未來更具兼容性。

Chartist 的與眾不同在于它是社區(qū)的成果，這使得它沒有其他圖表庫的局限性。由于過于關注瑣碎的變動和功能完整，導致你在使用其他類庫時很焦心。

協(xié)議: 開源，所有用戶皆可免費使用。

2、FusionCharts

FusionCharts帶來了最全面的庫，超過90種圖表和900種圖——所有均就緒備用。它們自詡為行業(yè)內最好看的圖表，它提供了一個功能強大的體驗儀表板，通過它可以鳥瞰其整個業(yè)務功能。

FusionCharts 兼容從 PC 和 Mac 電腦，iPhone 和 Android 平板電腦等多種設備；他們做了許多額外的努力來確保跨瀏覽器的兼容性，甚至包括 IE6！

他們還涵蓋了所有基礎格式 —— JSON 和 XML 數(shù)據(jù)格式都能夠接受；繪制可以通過 HTML5、SVG 和 VML，圖表可以導出為 PNG、JPG 或 PDF 格式。FusionCharts 的擴展可以很容易地與你所選擇的任何技術集成，包括 jQuery，AngularJS，PHP 和 Rails。

總的來說，F(xiàn)usionCharts 擁有你創(chuàng)建漂亮圖表和做嚴格業(yè)務分析所需的任何特征和格式。而且最好的部分是非商業(yè)用途時你可以免費下載并使用，沒有任何限制。

源碼許可證：非商業(yè)免費，商業(yè)用途收費。

3、DyGraphs

Dygraphs 是一個開源的 JavaScript 圖表庫，最適用于極端大數(shù)據(jù)集。它是開箱式互動，通過縮放甚至可以支持手機。

它既兼容主流瀏覽器，也向后兼容 IE8。選項和自定義回調功能使它具有極高的可配置性。

協(xié)議: 開源，面向所有用戶免費。

4、Chartjs

Chart.js適用于小項目，扁平化，干凈，優(yōu)雅，快速。它是一個微型的開源庫，最小化壓縮后只有11kb大小。它包括六個核心圖表類型（線圖，柱圖，雷達圖，極地圖，餅圖和環(huán)形圖），每個都是獨立的模塊，所以你甚至可以只加載項目需要的模塊以最大化縮小代碼占用空間。

它使用HTML5 canvas元素渲染圖表，并且使用polyfills方式兼容在IE7/8上運行。所有圖表都是可響應的。

協(xié)議: 開源，面向所有用戶免費。

5、GoogleCharts

Google Charts 提供大量不同種類的圖表，它最大程度上滿足了數(shù)據(jù)可視化的需要。圖表基于 HTML5/SVG，為了兼容老版本的 IE 還支持 VML。所有的圖表都是可交互可縮放的。你可以去看看他們的圖表庫。最棒的是他們的圖表絕對免費。

協(xié)議：免費，但是不開源，在你的服務器上使用他們的 JS 文件是 Google’s協(xié)議不允許 的。因此如果你是一家企業(yè)并且有很多敏感數(shù)據(jù)，Google Charts 可能不是一個最佳的選項。

6、HighCharts

Highcharts 是又一個流行的交互圖表庫，與其他庫一樣，它是基于 HTML5/SVG/VML，所以不需要擴展插件。提供的圖表類型很廣泛，像曲線圖，柱狀圖，條形圖，地圖，儀表盤等。

它還提供個人用戶免費可在線生成交互式圖表的接口 Highcharts cloud，商業(yè)使用需要購買授權。

協(xié)議: 非商業(yè)使用免費，商業(yè)使用付費。

7、Flot

Flot 是最古老的圖表庫之一，用法簡單并聚焦交互特性。它是特定的 jQuery 庫，這意味著使用它需要熟悉基礎的 jQuery。但是從另一方面來說，這意味著你可以全面控制呈現(xiàn)，動作和用戶交互。

Flot 兼容大多數(shù)瀏覽器，向下兼容到 IE6。Flot 的插件庫提供許多類型的圖，所有貢獻都是社區(qū)提供的。你可以看看這些由 Flot 制作的例子。

協(xié)議: 開源，面向所有用戶免費。

8、D3.js

D3通常是提到數(shù)據(jù)可視化時出現(xiàn)的第一個名字。它是一個非常強大的開源項目，可以通過動態(tài)更新DOM創(chuàng)造出驚人的視覺效果和圖形。另外，它使用HTML，CSS和SVG。

它符合W3C標準，并且是跨瀏覽器兼容的。開發(fā)者們往往喜歡它所帶來的許多特征，比如“進入和退出”以及強大的過渡。你可以到這里找到一些 D3 的示例。

需要說明的是，它沒有預建圖表，即時學習基本的圖表也有一條非常陡峭的學習曲線。但開發(fā)者們極富創(chuàng)新性，開發(fā)出了不少基于D3的包裝庫。后面我們將涉及到其中的一些佼佼者。

源碼許可證: 開源。免費使用。

9、n3-charts

如果你正在尋找一種在 AngularJS 應用下創(chuàng)建簡單互動線圖的方法，這將是你所需要的。N3 基于D3.js，針對少量受眾–基于 AngularJS 繪制通用線圖。如果你需要更多的圖表類型，它可能不適合你。你可以在這里看到一些N3線圖的實例。

源碼許可證：開源。對所有人免費。

10、NVD3

NVD3是一個旨在建立可復用的圖表和組件的 d3.js 項目——它提供了同樣強大的功能，但更容易使用。它可以讓你處理復雜的數(shù)據(jù)集來創(chuàng)建更高級的可視化。

源碼許可證：開源。對所有人免費。

11、Ember Charts

Addepar 的開發(fā)者正為提升 Ember 以及其附屬庫 Ember Charts、Ember Tables 和 Ember Widgets 的體驗的工作而穩(wěn)步推進著。Ember Charts 基于 D3.js 和 Ember.js 框架提供了一個易于使用的，可擴展的圖表套件。

其強壯且優(yōu)雅——針對壞數(shù)據(jù)的錯誤處理能確保有壞數(shù)據(jù)時應用程序不會崩潰。你甚至可以通過擴展它來創(chuàng)建自己的圖表類型。

源碼許可證：開源。對所有人免費。

12、jQuery Sparklines

我們一直在談論那些能搞定一切的重量型的庫。但有時你需要的是針對簡單的任務簡單些的東西。jQuery Sparklines 插件提供了一個合適的解決方案。它能夠被用來生成迷你型的小內嵌圖表，剛好足夠去表現(xiàn)趨勢——只需要最小量的編碼。適用于大多數(shù)現(xiàn)代瀏覽器包括更老的IE6。

源碼許可證：開源。對所有人免費。

13、Sigma.js

當我們在特定的使用場景下時，我們必須談談 Sigma。Sigma 是一個強大的 JavaScript 庫，其關注于呈現(xiàn)交互圖形和 Web 網(wǎng)絡。

Sigma 的庫和插件包有大量的互動設置。一旦你使用了 Sigma，你將再也不會覺得線圖無聊。看一下這個sigma.js側翻演示你就會明白我的意思。

源碼許可證：開源。對所有人免費。

14、Morris.js

是的，正如 Morris 所說，好看的圖不應該制作困難。Morris 是一個基于 jQuery 和 Raphael 的輕量級庫，它提供簡單干凈的線條，面積圖，條形及圓環(huán)圖。如果你正在尋找一些快速簡單且優(yōu)雅的庫，它絕對值得一試。

源碼許可證：開源。對所有人免費。

15、Cytoscape.js

Cytoscape.js 是一個開源的、功能齊全的圖形庫，它純粹用 JavaScript 編寫，基于 LGPL3+ 并完全免費。經(jīng)過高度優(yōu)化之后，它并不依賴外部。Cytoscape.js 可以讓你創(chuàng)建可復用的圖形工具，并能夠集成到你的 JavaScript 代碼中。

它同樣兼容所有現(xiàn)代瀏覽器，還兼容各種軟件框架，比如CommonJS和Node.js，AMD/Require.js，jQuery 以及 Meteor/Atmosphere 等。注意，雖然它與Cyctoscape 桌面應用名字相同，但它們是完全不同的。

源碼許可證：免費。對所有人免費。

16、C3.js

C3.js 是另一個基于 D3 可重用的圖表庫。大量的基于 D3 的圖表工具表明了太多人喜歡 D3 的功能，但也反映了大家討厭用 D3 直接編碼。

C3.js 提供了一種不同于 D3 學習曲線的方法，它將構建整個圖表所需要的代碼進行了包裝。C3允許你創(chuàng)建自定義的類，這樣就可以生成自己的風格。它提供了大量的API和回調，以便你可以在第一次渲染之后更新圖表。

源碼許可證：開源。對所有人免費。

17、Rickshaw

Rickshaw 在 Shutterstock 被開發(fā)為一個建時間序列圖的工具包。像其他一些我們已經(jīng)討論過的工具一樣，Rickshaw 也是基于 D3 庫。它是開放并開源的（遵循 MIT 許可）。

你可以在這里看到一些 Rickshaw 的有趣例子。Rickshaw 的眾多擴展和自定義的特性能夠讓你生成漂亮的時序圖。

源碼許可證：開源。對所有人免費。

18、Cubism.js

Cubism 也許是顯示時間序列最佳的 D3 插件。是什么使它脫穎而出的呢？你可以引入多個來源的數(shù)據(jù)，比如 Graphite、Cube 和其他來創(chuàng)造令人敬畏的實時圖表來展現(xiàn)你的數(shù)據(jù)。

它能夠渲染增量，使用 Canvas 來一次一個像素的偏移圖表。Cubism 的水平圖要比標準的平面圖更好地利用垂直空間，能夠讓你一眼下來獲取更多的數(shù)據(jù)并增加一目了然的可能性。

源碼許可證：開源。對所有人免費。

19、Plottable.js

Plottable 采取了一些不同于 D3 框架的方法。它已經(jīng)有一套可插拔的模塊化組件，這些組件封裝了渲染邏輯。這形成了一個單獨的布局引擎用來實際定位。

這意味著你可以使用任何 Plottable 的組件并將其添加到現(xiàn)有的圖表，或使用 Plottable 創(chuàng)建一個全新的圖表。它基本以一個更模塊化、即插即用的方式賦予了你 D3 的力量。可以通過這些示例看一下 Plottable 的能力。

源碼許可證：開源。對所有人免費。

20、Canvas.js

正如名字所隱含的，Canvas.js 是一個 HTML5 —— JavaScript 的圖表庫，基于 Canvas 元素。Canvas 允許你創(chuàng)建完全響應式且跨設備的豐富圖表。除此之外，它有許多很好看的主題，他們聲稱要比傳統(tǒng)的基于 Flash 和 SVG 圖型快10倍。

源碼許可證：非商業(yè)免費，商業(yè)用途收費。

總結

數(shù)據(jù)的可視化和分析是當今業(yè)務流程的的一個重要的組成部分。公司不論大小，都需要簡潔、高效、互動性的方式來詮釋數(shù)據(jù)。所以選擇適合你需求的 JavaScript 圖表庫尤為重要。

像 FusionCharts，GoogleCharts，Dygraphs 或 D3 的衍生庫可能更適合那些處理大量數(shù)據(jù)的企業(yè)，或那些很大程度上依賴于數(shù)據(jù)分析的小公司。如果你只需要一些小而快的庫，Morris.js 或 Chart.js 或許更適合你。對于圖形和和網(wǎng)絡，Cytoscape 或 Sigma.js 可能是更好的選擇。

我盡量將最好的工具包括在這里，但我相信你也有你的最愛，你最喜歡的 JS 圖表庫是哪個，為什么？