JavaScript通如何過(guò)RGraph實(shí)現(xiàn)動(dòng)態(tài)儀表盤
目前針對(duì)于統(tǒng)計(jì)圖的制作方法有很多,可以直接利用快逸報(bào)表中的自帶統(tǒng)計(jì)圖,還可以通過(guò)自定義統(tǒng)計(jì)圖個(gè)性化定制,當(dāng)然除此之外,在新的HTML5標(biāo)準(zhǔn)中,新增了一個(gè)非常重要的元素—canvas元素。使用該元素,可以在頁(yè)面中直接進(jìn)行各種復(fù)雜圖形的制作。因此,如果使用該元素繪制統(tǒng)計(jì)圖,比之前使用服務(wù)器端控件來(lái)生成統(tǒng)計(jì)圖的方法更加具有優(yōu)越性,因?yàn)槭褂昧嗽撛刂螅L制統(tǒng)計(jì)圖的工作是直接在客戶端進(jìn)行的,而不再是在服務(wù)器端所完成的了。這不僅意味著不再占用服務(wù)器端的資源,而且意味著可以直接利用客戶端計(jì)算機(jī)的強(qiáng)大資源,繪制統(tǒng)計(jì)圖的速度也就可以大大地得到提高了。而且,因?yàn)橛脕?lái)控制canvas圖形繪制的腳本代碼是可以被壓縮的(例如,當(dāng)你使用Apache服務(wù)器的時(shí)候,mod_gzip將自動(dòng)幫你執(zhí)行代碼壓縮工作),可以被緩存的,所以也就可以大幅度地減少帶寬的占用了。本文就介紹了這樣一款制作統(tǒng)計(jì)圖的插件。設(shè)想一下,假如由于客戶端的訪問(wèn),服務(wù)器端每天需要?jiǎng)?chuàng)建100,000幅統(tǒng)計(jì)圖,這對(duì)服務(wù)器端來(lái)說(shuō),無(wú)疑是一個(gè)非常巨大的資源占用。
本文介紹一款名叫Rgraph的插件,使用RGraph統(tǒng)計(jì)圖制作插件的話,可以將這個(gè)資源占用減少到接近零的程度,因?yàn)樗袆?chuàng)建統(tǒng)計(jì)圖的工作都是在客戶端完成的,就像渲染HTML網(wǎng)頁(yè)一樣,服務(wù)器端只負(fù)責(zé)發(fā)送數(shù)據(jù),不再負(fù)責(zé)統(tǒng)計(jì)圖的生成與發(fā)送了,同時(shí)帶寬的占用情況也大大得到了改善。
另外,由于統(tǒng)計(jì)圖是依靠JavaScript來(lái)生成的,所以當(dāng)你查看這個(gè)顯示統(tǒng)計(jì)圖的HTML網(wǎng)頁(yè)的時(shí)候,該網(wǎng)頁(yè)是可以為離線狀態(tài)的了。
對(duì)于瀏覽器來(lái)說(shuō),目前該插件受到了Firebox 4,Google Chrome 10,Opera 11,Safari 5、IE9瀏覽器的支持。
官網(wǎng)網(wǎng)站為:http://www.rgraph.net/examples/index.html !
我今天就做關(guān)于儀表盤的實(shí)現(xiàn),三個(gè)儀表盤,不同樣式而已!效果如下:
你可以設(shè)置頭內(nèi)容如 :java小強(qiáng) 這個(gè)標(biāo)題的內(nèi)容和樣式,也可以設(shè)置底部的內(nèi)容和樣式,如:cuisuqiang@163.com !
第一次和第三個(gè)創(chuàng)建時(shí):
var gauge1 = new RGraph.Gauge('cvs1', 0, 100, 84);
var gauge3 = new RGraph.Gauge('cvs3', -100, 100, 84);
繪圖的地址,最小值,最大值和當(dāng)前值,第二個(gè)參數(shù)有點(diǎn)不同:
var gauge2 = new RGraph.Gauge('cvs2', 0, 200, [184,12]);
由于他是兩個(gè)指針,所以當(dāng)前值參數(shù)是一個(gè)數(shù)組。
那么有的人說(shuō)了,那我想畫三個(gè)指針怎么辦,很簡(jiǎn)單,傳三個(gè)參數(shù)!
我們整個(gè)頁(yè)面的源碼給大家看一下,運(yùn)行后就是上面的效果:
<html> <head> <title>Examples of the Gauge chart</title> <script src="RGraph.common.core.js" ></script> <script src="RGraph.common.effects.js" ></script> <script src="RGraph.common.dynamic.js" ></script> <script src="RGraph.gauge.js" ></script> <script src="excanvas.js"></script> <script> window.onload = function () { var gauge1 = new RGraph.Gauge('cvs1', 0, 100, 84); gauge1.Set('chart.scale.decimals', 0); gauge1.Set('chart.tickmarks.small', 50); gauge1.Set('chart.tickmarks.big',5); gauge1.Set('chart.title.top', 'Java小強(qiáng)'); gauge1.Set('chart.title.top.size', 24); gauge1.Set('chart.title.bottom', 'cuisuqiang@163.com'); gauge1.Set('chart.title.bottom.color', '#aaa'); gauge1.Draw(); function Updategauge () { gauge1.value=RGraph.random(5,90); RGraph.Effects.Gauge.Grow(gauge1); setTimeout(Updategauge, 2000); } Updategauge(); var gauge2 = new RGraph.Gauge('cvs2', 0, 200, [184,12,58]); gauge2.Set('chart.title.top', 'Java小強(qiáng)'); gauge2.Set('chart.title.bottom.size', 'Italic 14'); // Hmmmm gauge2.Set('chart.title.bottom.font', 'Impact'); gauge2.Set('chart.title.bottom.color', '#ccc'); gauge2.Set('chart.title.bottom', 'cuisuqiang@163.com'); gauge2.Set('chart.title.bottom.pos', 0.4); gauge2.Set('chart.background.color', 'black'); gauge2.Set('chart.background.gradient', true); gauge2.Set('chart.centerpin.color', '#666'); gauge2.Set('chart.needle.colors', [RGraph.RadialGradient(gauge2, 125, 125, 0, 125, 125, 25, 'transparent', 'white'), RGraph.RadialGradient(gauge2, 125, 125, 0, 125, 125, 25, 'transparent', '#d66')]); gauge2.Set('chart.needle.size', [null, 50]); gauge2.Set('chart.text.color', 'white'); gauge2.Set('chart.tickmarks.big.color', 'white'); gauge2.Set('chart.tickmarks.medium.color', 'white'); gauge2.Set('chart.tickmarks.small.color', 'white'); gauge2.Set('chart.border.outer', '#666'); gauge2.Set('chart.border.inner', '#333'); gauge2.Set('chart.colors.ranges', []); gauge2.Draw(); function Updategauge2 () { gauge2.value = [RGraph.random(2,190), RGraph.random(5,195), RGraph.random(5,195)] RGraph.Effects.Gauge.Grow(gauge2); setTimeout(Updategauge2, 2000); } Updategauge2(); var gauge3 = new RGraph.Gauge('cvs3', -100, 100, 84); gauge3.Set('chart.scale.decimals', 0); gauge3.Set('chart.tickmarks.small', 50); gauge3.Set('chart.tickmarks.big',5); gauge3.Set('chart.title.top', 'Java小強(qiáng)'); gauge3.Set('chart.title.top.size', 24); gauge3.Set('chart.title.bottom', 'cuisuqiang@163.com'); gauge3.Set('chart.title.bottom.color', '#aaa'); gauge3.Set('chart.colors.ranges', [[-100, -90, 'red'], [-90, -80, 'yellow'], [80, 90, 'yellow'], [90, 100, 'red']]); gauge3.Set('chart.adjustable', true); gauge3.Draw(); function Updategauge3 () { gauge3.value = RGraph.random(2,99); RGraph.Effects.Gauge.Grow(gauge3); setTimeout(Updategauge3, 2000); } Updategauge3(); } </script> </head> <body> <div style="text-align: center"> <canvas id="cvs1" width="250" height="250">[No canvas support]</canvas> <canvas id="cvs2" width="250" height="250">[No canvas support]</canvas> <canvas id="cvs3" width="250" height="250">[No canvas support]</canvas> </div> </body> </html>
你最好用Firebox 看,使用IE也能看到效果,但是一旦進(jìn)行動(dòng)態(tài)更新指針的時(shí)候,就會(huì)把瀏覽器給搞死!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js字符串轉(zhuǎn)json對(duì)象的四種實(shí)現(xiàn)方法
使用ajax的開發(fā)項(xiàng)目過(guò)程中,經(jīng)常需要將json格式的字符串返回到前端,前端解析成js對(duì)象(JSON),下面這篇文章主要給大家介紹了關(guān)于js字符串轉(zhuǎn)json對(duì)象的四種實(shí)現(xiàn)方法,需要的朋友可以參考下2023-04-04JavaScript 關(guān)于元素獲取焦點(diǎn)(隱藏元素與div)
關(guān)于元素獲取焦點(diǎn)要注意2個(gè)小問(wèn)題,需要的朋友可以參考下。2011-01-01javascript 原型與原型鏈的理解及應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript 原型與原型鏈的理解及應(yīng)用,結(jié)合實(shí)例形式分析了javascript原型與原型鏈的具體原理、功能、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02javascript實(shí)現(xiàn)生成并下載txt文件方式
這篇文章主要介紹了javascript實(shí)現(xiàn)生成并下載txt文件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09javascript+ajax實(shí)現(xiàn)產(chǎn)品頁(yè)面加載信息
本文給大家分享的是使用javascript結(jié)合ajax實(shí)現(xiàn)產(chǎn)品頁(yè)面無(wú)刷新加載信息的代碼,非常的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。2015-07-07JS實(shí)現(xiàn)的顏色實(shí)時(shí)漸變效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的顏色實(shí)時(shí)漸變效果,結(jié)合實(shí)例形式分析了JavaScript結(jié)合時(shí)間函數(shù)定時(shí)觸發(fā)動(dòng)態(tài)改變頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-03-03