轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   www.izc.net.cn  )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源：http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，   請(qǐng)點(diǎn)這里　

圖表是數(shù)據(jù)圖形化的表示，通過(guò)形象的圖表來(lái)展示數(shù)據(jù)，比如條形圖，折線圖，餅圖等等。可視化圖表可以幫助開(kāi)發(fā)者更容易理解復(fù)雜的數(shù)據(jù)，提高生產(chǎn)的效率和Web應(yīng)用和項(xiàng)目的可靠性。

在這篇文章中，藍(lán)藍(lán)設(shè)計(jì)收集了值得網(wǎng)站設(shè)計(jì)開(kāi)發(fā)者收藏的JavaScript圖形圖表庫(kù)，適合各種圖表需求。其中大部分都是免費(fèi)而且開(kāi)源的，希望大家能在下面的列表中找到適合自己需求的JavaScript圖表和圖形庫(kù)。

1.  JS Charts

JS Charts 是個(gè)基于JavaScript的圖表生成器，不需要任何編碼。JS Charts 非常容易使用，只要用戶使用客戶端腳本（比如，在 web 瀏覽器中執(zhí)行）。它不需要多余的插件和服務(wù)器模塊，只需要下載 JS Charts 的腳本，準(zhǔn)備好 XML，JSON 或者 JavaScript 數(shù)組數(shù)據(jù)。

2.  Canvasjs

CanvasJS 是個(gè)易用的 HTML5 & JavaScript 圖表庫(kù)，基于 Canvas 元素。Graphs 可以通過(guò)設(shè)備渲染，包括 iPhone，iPad，Android，Windows Phone，Microsoft Surface，Desktops 等等。它允許用戶創(chuàng)建適用于所有設(shè)備，不影響 web 應(yīng)用程序的功能和可維護(hù)性的富儀表盤。CanvcasJS 有著非常漂亮的主題和超過(guò)傳統(tǒng)的 Flash 和 SVG 圖表 10x 倍以上的速度——生成輕量級(jí)，漂亮和響應(yīng)式的儀表圖。

3.  Chart.js

Chart.js 是個(gè)簡(jiǎn)單的，面向?qū)ο蟮目蛻舳藞D形庫(kù)，用戶可以用 6 中不同的方式來(lái)可視化數(shù)據(jù)。每個(gè)方式都是動(dòng)畫(huà)效果的，完全自定義，而且看起來(lái)非常好看，即使在 retina 顯示。它使用 HTML5 canvas 元素，支持所有現(xiàn)代瀏覽器，并且支持  IE7/8。

4.  Aristochart

Aristochart 是個(gè)高度自定義，靈活的折線 Canvas 圖表庫(kù)，允許用戶集中精力在圖表的審美方面，后臺(tái)工作做得非常好。Aristochart 有個(gè)持續(xù)進(jìn)步的社區(qū)，提供許多不斷增長(zhǎng)的主題給用戶選擇。

5.  xCharts

xCharts 是一個(gè)使用 D3.js 來(lái)構(gòu)建漂亮的可定制的數(shù)據(jù)驅(qū)動(dòng)的 JavaScript圖表庫(kù)，他使用HTML，CSS，SVG實(shí)現(xiàn)圖表，xCharts 被設(shè)計(jì)為一個(gè)動(dòng)態(tài)的、流暢的、開(kāi)放的和可定制化的庫(kù)。

6.  BonsaiJS

BonsaiJS 是個(gè)輕量級(jí)的 JavaScript圖形庫(kù)，提供直觀的圖形 API 和 SVG 渲染器。主要特性包括：架構(gòu)分離的運(yùn)行器和渲染器；iFrame，Worker 和 Node 運(yùn)行上下文；形狀，路徑，Assets（音頻，圖像，字體，subMovies），Keyframe 和常規(guī)動(dòng)畫(huà)，等等。支持現(xiàn)代化瀏覽器： Safari, Chrome 和 Firefox。

7.  Sigma.js

Sigma.js 是個(gè)免費(fèi)開(kāi)源的 JavaScript圖形庫(kù)，使用 HTML5 canvas 元素。它的設(shè)計(jì)是特別為了在 web 界面分享交互式網(wǎng)絡(luò) Map 和動(dòng)態(tài)展示網(wǎng)絡(luò)數(shù)據(jù)庫(kù)。

8.  Morris.js

Morris.js 是個(gè)輕量級(jí)的 JavaScript庫(kù)，使用 jQuery 和 Rapha&enuml 來(lái)繪制時(shí)序圖。 Morris.js 生命周期是從代碼驅(qū)動(dòng) howmanyleft.co.uk 圖表開(kāi)始的。它支持的瀏覽器有：  IE6+, Safari/Chrome/Firefox, iOS 3+ 和 Android 3+。它的公共 API 非常的小，只有一個(gè)函數(shù)： Morris.Line(選項(xiàng))，包括了許多配置選項(xiàng)。

9.  Paper.js

Paper.js 是一個(gè)開(kāi)源的向量圖形腳本框架，基于 HTML5Canvas 開(kāi)發(fā)。提供清晰的場(chǎng)景圖、DOM和大量強(qiáng)大的功能用來(lái)創(chuàng)建各種向量圖和貝塞爾曲線。

10.  AmCharts

AmCharts 是個(gè)高級(jí)圖表庫(kù)，適用于所有數(shù)據(jù)的可視化。AmCharts 包括： Column, Bar, Line, Area, Step, Step without risers, Smoothed line, Candlestick, OHLC, Pie/Donut, Radar/ Polar, XY/Scatter/Bubble, Bullet, Funnel/Pyramid 等等。

11.  Smoothie Charts

Smoothie Charts是個(gè)極小的圖表庫(kù)，專為實(shí)時(shí)流媒體數(shù)據(jù)設(shè)計(jì)的。Joe Walnes 想展示 WebSocket推動(dòng)的實(shí)時(shí)的流數(shù)據(jù)。雖然很多圖表庫(kù)允許用戶動(dòng)態(tài)更新數(shù)據(jù)，但是沒(méi)有一個(gè)是可以優(yōu)化源源不斷的流數(shù)據(jù)。

12.  Dygraphs

Dygraphs 是個(gè)快速，靈活，開(kāi)源的 JavaScript 圖表庫(kù)。它允許用戶展示和解析密集的數(shù)據(jù)集。可以高亮需要強(qiáng)調(diào)的數(shù)據(jù)集。可以使用鼠標(biāo)點(diǎn)擊或者用鼠標(biāo)拖動(dòng)來(lái)縮放圖表；可以修改數(shù)值或者點(diǎn)擊條目來(lái)調(diào)整平均周期。

13.  Grafico

Grafico 是 Grafico 是一個(gè)基于 Rapha?l 和 Prototype.js 構(gòu)建的 JavaScript 圖表庫(kù)，提供了各種圖表類型。這些漂亮的圖表，有利于傳遞他們的信息。

14.  Highchart JS

Highcharts JS 是一個(gè)制作圖表的純 Javascript類庫(kù)，主要特性如下：兼容性：兼容當(dāng)今所有的瀏覽器，包括 iPhone、IE 和火狐等等；對(duì)個(gè)人用戶完全免 費(fèi)；純JS，無(wú)BS；支持大部分的圖表類型：直線圖，曲線圖、區(qū)域圖、區(qū)域曲線圖、柱狀圖、餅裝圖、散布圖；跨語(yǔ)言：不管是 PHP、Asp.net 還是 Java 都可以使用。

15.  Flotr

Flotr 是一個(gè)基于 Prototype 開(kāi)發(fā)的 JavaScript繪圖工具。支持圖例，鼠標(biāo)跟蹤，圖片區(qū)域選擇，圖片縮放，添加事件鉤子（event hook），通過(guò)CSS設(shè)置樣式等。

16.  Flot

Flot 是受 Plotr 和 PlotKit 的 啟發(fā)，Ole Laursen 基于 jquery 開(kāi)發(fā)了一個(gè)圖表繪制(WEB Chart)插件并命名為 flot。 flot 是個(gè)純 JavaSript 庫(kù)，專注于簡(jiǎn)單的使用方式，迷人的外觀和交互式特性。支持的瀏覽器有： Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+。

17.  jFreeChart

JFreeChart  主要用來(lái)各種各樣的圖表，這些圖表包括：餅圖、柱狀圖(普通柱狀圖以及堆棧柱狀圖)、線圖、區(qū)域圖、分布圖、混合圖、甘特圖以及一些儀表盤等等。JFreeChart 項(xiàng)目歷史悠久，而且有大量的開(kāi)發(fā)者在維護(hù)。

18.  Plotkit

PlotKit 是一個(gè)純 JavaScript 繪圖工具包。它支持 HTML Canvas 和 Adobe SVG。有著很完整的文檔，方便用戶使用。

19.  Planetary.js

Planetary.js 是個(gè)令人稱奇的創(chuàng)建交互式 web 地球儀的 JavaScript庫(kù)。它使用 D3 和 TopoJSON 來(lái)解析和渲染地理信息。Planetary.js 使用基于插件的架構(gòu)，甚至默認(rèn)自身就是個(gè)插件！這使得 Planetary.js 非常靈活，而且它是允許用戶完全自定義，包括顏色，大小，rotation 等等。更重要的是，用戶可以在任意位置使用自定義的顏色和大小來(lái)顯示動(dòng)畫(huà)“pings”；它還支持鼠標(biāo)拖動(dòng)和縮放，100% 免費(fèi)和開(kāi)源。

20.  Ember Charts

Ember Charts 是個(gè)圖表庫(kù)，使用 Ember.js 和 d3.js 框架構(gòu)建的。它包括時(shí)間線，條形圖，餅圖和散點(diǎn)圖，非常容易擴(kuò)展和修改。這些圖表組件都是開(kāi)箱即用的，在圖表交互和演示方面應(yīng)用的很好。

21.  Sparky

Sparky 是個(gè)免費(fèi)的 JavaScript 波形圖庫(kù)，依賴于 Raphaël ，非常容易使用。支持多個(gè)圖表類型（折線，條形，area），折線和區(qū)域圖可以有多個(gè)顏色選擇。

22.  Envision.js

Envision.js 是個(gè) JavaScript 庫(kù)，用來(lái)簡(jiǎn)化，快速創(chuàng)建交互式的 HTML5 可視化圖表。它包括兩個(gè)圖表類型：時(shí)序圖和 Finance ，提供 API 給開(kāi)發(fā)者，用戶可以直接自定義創(chuàng)建圖表。這個(gè)庫(kù)氏基于 Flotr2 和 HTML5 Canvas 的。它與框架無(wú)關(guān)，依賴于幾個(gè)小的 JavaScript 庫(kù)。