JavaScript通如何過RGraph實現(xiàn)動態(tài)儀表盤
目前針對于統(tǒng)計圖的制作方法有很多，可以直接利用快逸報表中的自帶統(tǒng)計圖，還可以通過自定義統(tǒng)計圖個性化定制，當(dāng)然除此之外，在新的HTML5標準中，新增了一個非常重要的元素—canvas元素。使用該元素，可以在頁面中直接進行各種復(fù)雜圖形的制作。因此，如果使用該元素繪制統(tǒng)計圖，比之前使用服務(wù)器端控件來生成統(tǒng)計圖的方法更加具有優(yōu)越性，因為使用了該元素之后，繪制統(tǒng)計圖的工作是直接在客戶端進行的，而不再是在服務(wù)器端所完成的了。這不僅意味著不再占用服務(wù)器端的資源，而且意味著可以直接利用客戶端計算機的強大資源，繪制統(tǒng)計圖的速度也就可以大大地得到提高了。而且，因為用來控制canvas圖形繪制的腳本代碼是可以被壓縮的（例如，當(dāng)你使用Apache服務(wù)器的時候，mod_gzip將自動幫你執(zhí)行代碼壓縮工作），可以被緩存的，所以也就可以大幅度地減少帶寬的占用了。本文就介紹了這樣一款制作統(tǒng)計圖的插件。設(shè)想一下，假如由于客戶端的訪問，服務(wù)器端每天需要創(chuàng)建100，000幅統(tǒng)計圖，這對服務(wù)器端來說，無疑是一個非常巨大的資源占用。
本文介紹一款名叫Rgraph的插件，使用RGraph統(tǒng)計圖制作插件的話，可以將這個資源占用減少到接近零的程度，因為所有創(chuàng)建統(tǒng)計圖的工作都是在客戶端完成的，就像渲染HTML網(wǎng)頁一樣，服務(wù)器端只負責(zé)發(fā)送數(shù)據(jù)，不再負責(zé)統(tǒng)計圖的生成與發(fā)送了，同時帶寬的占用情況也大大得到了改善。
另外，由于統(tǒng)計圖是依靠JavaScript來生成的，所以當(dāng)你查看這個顯示統(tǒng)計圖的HTML網(wǎng)頁的時候，該網(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)于儀表盤的實現(xiàn)，三個儀表盤，不同樣式而已！效果如下：
你可以設(shè)置頭內(nèi)容如 ：java小強 這個標題的內(nèi)容和樣式，也可以設(shè)置底部的內(nèi)容和樣式，如：cuisuqiang@163.com ！
第一次和第三個創(chuàng)建時：
var gauge1 = new RGraph.Gauge('cvs1', 0, 100, 84);
var gauge3 = new RGraph.Gauge('cvs3', -100, 100, 84);
繪圖的地址，最小值，最大值和當(dāng)前值，第二個參數(shù)有點不同：
var gauge2 = new RGraph.Gauge('cvs2', 0, 200, [184,12]);
由于他是兩個指針，所以當(dāng)前值參數(shù)是一個數(shù)組。
那么有的人說了，那我想畫三個指針怎么辦，很簡單，傳三個參數(shù)！
我們整個頁面的源碼給大家看一下，運行后就是上面的效果：
<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小強');
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小強');
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小強');
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也能看到效果，但是一旦進行動態(tài)更新指針的時候，就會把瀏覽器給搞死！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js字符串轉(zhuǎn)json對象的四種實現(xiàn)方法
使用ajax的開發(fā)項目過程中,經(jīng)常需要將json格式的字符串返回到前端,前端解析成js對象(JSON),下面這篇文章主要給大家介紹了關(guān)于js字符串轉(zhuǎn)json對象的四種實現(xiàn)方法,需要的朋友可以參考下2023-04-04
JavaScript 關(guān)于元素獲取焦點(隱藏元素與div)
關(guān)于元素獲取焦點要注意2個小問題，需要的朋友可以參考下。2011-01-01
這篇文章主要介紹了js正則匹配出所有圖片及圖片地址src的方法,涉及javascript正則匹配及頁面元素操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06
javascript 原型與原型鏈的理解及應(yīng)用實例分析
這篇文章主要介紹了javascript 原型與原型鏈的理解及應(yīng)用,結(jié)合實例形式分析了javascript原型與原型鏈的具體原理、功能、使用方法及操作注意事項,需要的朋友可以參考下2020-02-02
javascript實現(xiàn)生成并下載txt文件方式
這篇文章主要介紹了javascript實現(xiàn)生成并下載txt文件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
javascript+ajax實現(xiàn)產(chǎn)品頁面加載信息
本文給大家分享的是使用javascript結(jié)合ajax實現(xiàn)產(chǎn)品頁面無刷新加載信息的代碼，非常的簡單實用，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要介紹了JS實現(xiàn)的顏色實時漸變效果,結(jié)合實例形式分析了JavaScript結(jié)合時間函數(shù)定時觸發(fā)動態(tài)改變頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了微信小程序模板template簡單用法,結(jié)合實例形式分析了微信小程序模板template的功能、簡單使用方法及相關(guān)操作注意事項,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了Bootstrap3下拉菜單的實現(xiàn)方法，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-02-02
這篇文章主要為大家詳細解析了bootstrap下拉菜單使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01