2014-3-3 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)
來源:http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
圖表是數(shù)據(jù)圖形化的表示,通過形象的圖表來展示數(shù)據(jù),比如條形圖,折線圖,餅圖等等??梢暬瘓D表可以幫助開發(fā)者更容易理解復(fù)雜的數(shù)據(jù),提高生產(chǎn)的效率和Web應(yīng)用和項(xiàng)目的可靠性。
在這篇文章中,藍(lán)藍(lán)設(shè)計(jì)收集了值得網(wǎng)站設(shè)計(jì)開發(fā)者收藏的JavaScript圖形圖表庫,適合各種圖表需求。其中大部分都是免費(fèi)而且開源的,希望大家能在下面的列表中找到適合自己需求的JavaScript圖表和圖形庫。
1. JS Charts
JS Charts 是個(gè)基于JavaScript的圖表生成器,不需要任何編碼。JS Charts 非常容易使用,只要用戶使用客戶端腳本(比如,在 web 瀏覽器中執(zhí)行)。它不需要多余的插件和服務(wù)器模塊,只需要下載 JS Charts 的腳本,準(zhǔn)備好 XML,JSON 或者 JavaScript 數(shù)組數(shù)據(jù)。
CanvasJS 是個(gè)易用的 HTML5 & JavaScript 圖表庫,基于 Canvas 元素。Graphs 可以通過設(shè)備渲染,包括 iPhone,iPad,Android,Windows Phone,Microsoft Surface,Desktops 等等。它允許用戶創(chuàng)建適用于所有設(shè)備,不影響 web 應(yīng)用程序的功能和可維護(hù)性的富儀表盤。CanvcasJS 有著非常漂亮的主題和超過傳統(tǒng)的 Flash 和 SVG 圖表 10x 倍以上的速度——生成輕量級(jí),漂亮和響應(yīng)式的儀表圖。
Chart.js 是個(gè)簡單的,面向?qū)ο蟮目蛻舳藞D形庫,用戶可以用 6 中不同的方式來可視化數(shù)據(jù)。每個(gè)方式都是動(dòng)畫效果的,完全自定義,而且看起來非常好看,即使在 retina 顯示。它使用 HTML5 canvas 元素,支持所有現(xiàn)代瀏覽器,并且支持 IE7/8。
Aristochart 是個(gè)高度自定義,靈活的折線 Canvas 圖表庫,允許用戶集中精力在圖表的審美方面,后臺(tái)工作做得非常好。Aristochart 有個(gè)持續(xù)進(jìn)步的社區(qū),提供許多不斷增長的主題給用戶選擇。
xCharts 是一個(gè)使用 D3.js 來構(gòu)建漂亮的可定制的數(shù)據(jù)驅(qū)動(dòng)的 JavaScript圖表庫,他使用HTML,CSS,SVG實(shí)現(xiàn)圖表,xCharts 被設(shè)計(jì)為一個(gè)動(dòng)態(tài)的、流暢的、開放的和可定制化的庫。
BonsaiJS 是個(gè)輕量級(jí)的 JavaScript圖形庫,提供直觀的圖形 API 和 SVG 渲染器。主要特性包括:架構(gòu)分離的運(yùn)行器和渲染器;iFrame,Worker 和 Node 運(yùn)行上下文;形狀,路徑,Assets(音頻,圖像,字體,subMovies),Keyframe 和常規(guī)動(dòng)畫,等等。支持現(xiàn)代化瀏覽器: Safari, Chrome 和 Firefox。
Sigma.js 是個(gè)免費(fèi)開源的 JavaScript圖形庫,使用 HTML5 canvas 元素。它的設(shè)計(jì)是特別為了在 web 界面分享交互式網(wǎng)絡(luò) Map 和動(dòng)態(tài)展示網(wǎng)絡(luò)數(shù)據(jù)庫。
Morris.js 是個(gè)輕量級(jí)的 JavaScript庫,使用 jQuery 和 Rapha&enuml 來繪制時(shí)序圖。 Morris.js 生命周期是從代碼驅(qū)動(dòng) howmanyleft.co.uk 圖表開始的。它支持的瀏覽器有: IE6+, Safari/Chrome/Firefox, iOS 3+ 和 Android 3+。它的公共 API 非常的小,只有一個(gè)函數(shù): Morris.Line(選項(xiàng)),包括了許多配置選項(xiàng)。
Paper.js 是一個(gè)開源的向量圖形腳本框架,基于 HTML5Canvas 開發(fā)。提供清晰的場景圖、DOM和大量強(qiáng)大的功能用來創(chuàng)建各種向量圖和貝塞爾曲線。
AmCharts 是個(gè)高級(jí)圖表庫,適用于所有數(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 等等。
Smoothie Charts是個(gè)極小的圖表庫,專為實(shí)時(shí)流媒體數(shù)據(jù)設(shè)計(jì)的。Joe Walnes 想展示 WebSocket推動(dòng)的實(shí)時(shí)的流數(shù)據(jù)。雖然很多圖表庫允許用戶動(dòng)態(tài)更新數(shù)據(jù),但是沒有一個(gè)是可以優(yōu)化源源不斷的流數(shù)據(jù)。
Dygraphs 是個(gè)快速,靈活,開源的 JavaScript 圖表庫。它允許用戶展示和解析密集的數(shù)據(jù)集??梢愿吡列枰獜?qiáng)調(diào)的數(shù)據(jù)集??梢允褂檬髽?biāo)點(diǎn)擊或者用鼠標(biāo)拖動(dòng)來縮放圖表;可以修改數(shù)值或者點(diǎn)擊條目來調(diào)整平均周期。
Grafico 是 Grafico 是一個(gè)基于 Rapha?l 和 Prototype.js 構(gòu)建的 JavaScript 圖表庫,提供了各種圖表類型。這些漂亮的圖表,有利于傳遞他們的信息。
Highcharts JS 是一個(gè)制作圖表的純 Javascript類庫,主要特性如下:兼容性:兼容當(dāng)今所有的瀏覽器,包括 iPhone、IE 和火狐等等;對(duì)個(gè)人用戶完全免 費(fèi);純JS,無BS;支持大部分的圖表類型:直線圖,曲線圖、區(qū)域圖、區(qū)域曲線圖、柱狀圖、餅裝圖、散布圖;跨語言:不管是 PHP、Asp.net 還是 Java 都可以使用。
Flotr 是一個(gè)基于 Prototype 開發(fā)的 JavaScript繪圖工具。支持圖例,鼠標(biāo)跟蹤,圖片區(qū)域選擇,圖片縮放,添加事件鉤子(event hook),通過CSS設(shè)置樣式等。
Flot 是受 Plotr 和 PlotKit 的 啟發(fā),Ole Laursen 基于 jquery 開發(fā)了一個(gè)圖表繪制(WEB Chart)插件并命名為 flot。 flot 是個(gè)純 JavaSript 庫,專注于簡單的使用方式,迷人的外觀和交互式特性。支持的瀏覽器有: Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+。
JFreeChart 主要用來各種各樣的圖表,這些圖表包括:餅圖、柱狀圖(普通柱狀圖以及堆棧柱狀圖)、線圖、區(qū)域圖、分布圖、混合圖、甘特圖以及一些儀表盤等等。JFreeChart 項(xiàng)目歷史悠久,而且有大量的開發(fā)者在維護(hù)。
PlotKit 是一個(gè)純 JavaScript 繪圖工具包。它支持 HTML Canvas 和 Adobe SVG。有著很完整的文檔,方便用戶使用。
Planetary.js 是個(gè)令人稱奇的創(chuàng)建交互式 web 地球儀的 JavaScript庫。它使用 D3 和 TopoJSON 來解析和渲染地理信息。Planetary.js 使用基于插件的架構(gòu),甚至默認(rèn)自身就是個(gè)插件!這使得 Planetary.js 非常靈活,而且它是允許用戶完全自定義,包括顏色,大小,rotation 等等。更重要的是,用戶可以在任意位置使用自定義的顏色和大小來顯示動(dòng)畫“pings”;它還支持鼠標(biāo)拖動(dòng)和縮放,100% 免費(fèi)和開源。
Ember Charts 是個(gè)圖表庫,使用 Ember.js 和 d3.js 框架構(gòu)建的。它包括時(shí)間線,條形圖,餅圖和散點(diǎn)圖,非常容易擴(kuò)展和修改。這些圖表組件都是開箱即用的,在圖表交互和演示方面應(yīng)用的很好。
Sparky 是個(gè)免費(fèi)的 JavaScript 波形圖庫,依賴于 Raphaël ,非常容易使用。支持多個(gè)圖表類型(折線,條形,area),折線和區(qū)域圖可以有多個(gè)顏色選擇。
Envision.js 是個(gè) JavaScript 庫,用來簡化,快速創(chuàng)建交互式的 HTML5 可視化圖表。它包括兩個(gè)圖表類型:時(shí)序圖和 Finance ,提供 API 給開發(fā)者,用戶可以直接自定義創(chuàng)建圖表。這個(gè)庫氏基于 Flotr2 和 HTML5 Canvas 的。它與框架無關(guān),依賴于幾個(gè)小的 JavaScript 庫。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com