2015-5-8 藍(lán)藍(lán)設(shè)計的小編
藍(lán)藍(lán)設(shè)計( www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
每一個扁平化界面設(shè)計,都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計
來源:http://www.html5tricks.com/10-html5-chart-animation.html
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
今天我們要來分享另外一種類型的HTML5動畫:HTML5圖表應(yīng)用。圖表在網(wǎng)頁中應(yīng)用十分廣泛,尤其是后臺的統(tǒng)計功能,更能體現(xiàn)出圖表的強(qiáng)大之處。本文將介紹一些比較實用的HTML5圖表動畫,有些結(jié)合jQuery,有些是直接基于Canvas,一起來看看吧。
之前我們已經(jīng)為大家分享過很多HTML5圖表應(yīng)用了,每一個HTML5圖表都非常實用。今天我們要介紹一款基于HTML5 Canvas的圖表應(yīng)用Chart.js,它的功能非常強(qiáng)大,有很多圖表類型,包括折線圖、柱狀圖、餅圖、放射圖等,你可以下載并將它們應(yīng)用到自己的項目中。
柱形圖 圈餅圖 折線圖 餅圖 極面圖 雷達(dá)區(qū)域圖 源碼下載
這次我們要分享一款很酷的HTML5 3D圖表應(yīng)用,它是一款柱狀圖表,呈3D的外觀樣式,并且我們可以改變圖表的顏色主題,讓其更加符合你的需求。這款HTML5圖表可以切換需要查看的圖表數(shù)據(jù),在切換的時候有不錯的動畫效果,而且,我們還可以切換圖表的大小,以適應(yīng)不同大小的瀏覽窗口。
之前我們分享過很多HTML5折線圖表,像HTML5 SVG多折線圖表、HTML5/CSS3動態(tài)折線圖表等。今天我們要分享一款基于HTML5 Canvas的折線圖表應(yīng)用,其實我們僅僅是在canvas上面繪制了一條發(fā)光的折線,當(dāng)然圖表的x、y坐標(biāo)你可以自己繪制上去。
今天我們要來分享一款基于jQuery的highcharts實時圖表插件,highcharts圖表插件定義了每隔一秒鐘更新數(shù)據(jù),然后根據(jù)每個數(shù)據(jù)點繪制一條折線,隨著數(shù)據(jù)的更新,折線也就會不停的向前移動,形成一個類似CPU實時監(jiān)控的曲線圖表。這款jQuery圖表插件應(yīng)用比較廣泛,兼容所有瀏覽器。
XCalc是一款基于HTML5的數(shù)學(xué)函數(shù)圖形繪制插件,這款函數(shù)圖形繪制插件不僅可以繪制簡單的加減乘除運(yùn)算的函數(shù)圖形,也可以繪制乘方運(yùn)算和正弦余弦運(yùn)算的函數(shù)圖形。XCalc的配置也非常簡單,在HTML5圖表中應(yīng)用十分廣泛。
今天給大家?guī)硪豢頗TML5圖表應(yīng)用,圖表是基于SVG結(jié)構(gòu)的折線圖。遺憾的是這款HTML5圖表不可以自定義數(shù)據(jù)點,但是有一個特點是折線的顏色是漸變的,并且在圖表數(shù)據(jù)初始化的時候,折線顯示是帶有動畫的。
HTML5在圖表應(yīng)用中也十分廣泛,比起以前的網(wǎng)頁圖表,HTML5圖表制作更便捷,功能更強(qiáng)大。這款HTML5圖表插件外觀十分華麗和專業(yè),在數(shù)據(jù)展示方面也很有優(yōu)勢,圖表不僅支持多維數(shù)據(jù)展示,而且支持區(qū)域選擇數(shù)據(jù)功能,利用該HTML5圖表可以更加方便地管理你的數(shù)據(jù)。
這次我們要分享一款非常富有創(chuàng)意的jQuery圖表插件,這款jQuery環(huán)形百分比圖表插件有以下特點:1.圖表外觀是環(huán)形的,因此也十分特別。2.圖表數(shù)據(jù)有百分比顯示,你可以直截了當(dāng)?shù)乜吹疆?dāng)前數(shù)據(jù)情況。3.鼠標(biāo)滑過環(huán)形時,將突出顯示該項數(shù)據(jù),并顯示百分比。
今天我們要來分享一款基于HTML5 Canvas的折線圖表,這款HTML5折線圖表的特點有兩個,一個是圖表是有動畫效果的,即在圖表初始化的時候帶有動畫;第二個是這個HTML5折線圖表可以讓你動態(tài)添加數(shù)據(jù)節(jié)點,并且用折線平滑地連接,Canvas是這款折線圖的一個畫板。
今天我們要分享一款基于HTML5和SVG的圖表應(yīng)用,這款圖表是用區(qū)域塊來表示一種數(shù)據(jù)的,用區(qū)域線來表示該項數(shù)據(jù)在圖表的范圍,每一塊區(qū)域都可以定義自己的顏色,這樣可以讓圖表數(shù)據(jù)非常清晰明了。另外,我們只要將鼠標(biāo)移到區(qū)域線上,即可彈出一個該坐標(biāo)點的圖表數(shù)據(jù)詳情。
以上就是10個經(jīng)典實用的HTML5圖表動畫應(yīng)用,歡迎收藏分享
藍(lán)藍(lán)設(shè)計的小編 http://www.88yangsc.com