JavaScript通過RGraph如何實(shí)現(xiàn)動態(tài)儀表盤？相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),耒陽企業(yè)網(wǎng)站建設(shè),耒陽品牌網(wǎng)站建設(shè),網(wǎng)站定制,耒陽網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,耒陽網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

目前針對于統(tǒng)計(jì)圖的制作方法有很多，可以直接利用快逸報(bào)表中的自帶統(tǒng)計(jì)圖，還可以通過自定義統(tǒng)計(jì)圖個(gè)性化定制，當(dāng)然除此之外，在新的HTML5標(biāo)準(zhǔn)中，新增了一個(gè)非常重要的元素—canvas元素。使用該元素，可以在頁面中直接進(jìn)行各種復(fù)雜圖形的制作。因此，如果使用該元素繪制統(tǒng)計(jì)圖，比之前使用服務(wù)器端控件來生成統(tǒng)計(jì)圖的方法更加具有優(yōu)越性，因?yàn)槭褂昧嗽撛刂?，繪制統(tǒng)計(jì)圖的工作是直接在客戶端進(jìn)行的，而不再是在服務(wù)器端所完成的了。這不僅意味著不再占用服務(wù)器端的資源，而且意味著可以直接利用客戶端計(jì)算機(jī)的強(qiáng)大資源，繪制統(tǒng)計(jì)圖的速度也就可以大大地得到提高了。而且，因?yàn)橛脕砜刂芻anvas圖形繪制的腳本代碼是可以被壓縮的（例如，當(dāng)你使用Apache服務(wù)器的時(shí)候，mod_gzip將自動幫你執(zhí)行代碼壓縮工作），可以被緩存的，所以也就可以大幅度地減少帶寬的占用了。本文就介紹了這樣一款制作統(tǒng)計(jì)圖的插件。設(shè)想一下，假如由于客戶端的訪問，服務(wù)器端每天需要創(chuàng)建100，000幅統(tǒng)計(jì)圖，這對服務(wù)器端來說，無疑是一個(gè)非常巨大的資源占用。

本文介紹一款名叫Rgraph的插件，使用RGraph統(tǒng)計(jì)圖制作插件的話，可以將這個(gè)資源占用減少到接近零的程度，因?yàn)樗袆?chuàng)建統(tǒng)計(jì)圖的工作都是在客戶端完成的，就像渲染HTML網(wǎng)頁一樣，服務(wù)器端只負(fù)責(zé)發(fā)送數(shù)據(jù)，不再負(fù)責(zé)統(tǒng)計(jì)圖的生成與發(fā)送了，同時(shí)帶寬的占用情況也大大得到了改善。

另外，由于統(tǒng)計(jì)圖是依靠JavaScript來生成的，所以當(dāng)你查看這個(gè)顯示統(tǒng)計(jì)圖的HTML網(wǎng)頁的時(shí)候，該網(wǎng)頁是可以為離線狀態(tài)的了。
對于瀏覽器來說，目前該插件受到了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ù)組。

那么有的人說了，那我想畫三個(gè)指針怎么辦，很簡單，傳三個(gè)參數(shù)！

我們整個(gè)頁面的源碼給大家看一下，運(yùn)行后就是上面的效果：

  
  
  
  
  
  
  


  

    [No canvas support]
    [No canvas support]
    [No canvas support]
  

本文標(biāo)題：JavaScript通過RGraph如何實(shí)現(xiàn)動態(tài)儀表盤-創(chuàng)新互聯(lián)
本文路徑：http://news.spvevtbd.cn/article/dcjcij.html