欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript通如何過(guò)RGraph實(shí)現(xiàn)動(dòng)態(tài)儀表盤

 更新時(shí)間：2020年10月15日 16:15:33   作者：Java研發(fā)技術(shù)指南  
這篇文章主要介紹了JavaScript通如何過(guò)RGraph實(shí)現(xiàn)動(dòng)態(tài)儀表盤,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

目前針對(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)文章

最新評(píng)論