本文提供require 路径和 dojo仪表盘的图片。用哪个,哪个是什么样子的仪表盘,供大家参考。
<!DOCTYPE html>
<html>
<head>
<title>Dojo仪表盘</title>
<meta charset="utf-8">
<script src="http://192.168.240.186/arcgis_js_api/library/3.6/init.js"></script>
<script type="text/javascript">
var publicVariable=12;
require(["dojox/dgauges/GaugeBase",
"dojox/dgauges/components/default/CircularLinearGauge",
"dojox/dgauges/components/classic/SemiCircularLinearGauge",
"dojox/dgauges/components/classic/HorizontalLinearGauge",
"dojox/dgauges/components/default/VerticalLinearGauge",
"dojo/dom",
"dojo/domReady!"
],
function(
GaugeBase,
CircularLinearGauge,//圆形仪表
SemiCircularLinearGauge,//半圆形仪表
HorizontalLinearGauge,//横向刻度尺
VerticalLinearGauge,//纵向刻度尺
dom)
{
var watch1 = new CircularLinearGauge(//圆形仪表
{
value:publicVariable,
animationDuration:1000
},
dom.byId("watch1")
);
var watch2 = new SemiCircularLinearGauge(//半圆形仪表
{
value:publicVariable,
animationDuration:1000
},
dom.byId("watch2")
);
var watch3 = new HorizontalLinearGauge(//横向刻度尺
{
value:publicVariable,
animationDuration:1000
},
dom.byId("watch3")
);
var watch4 = new VerticalLinearGauge(//纵向刻度尺
{
value:publicVariable,
animationDuration:1000
},
dom.byId("watch4")
);
setInterval(TriggerBackendData, 2000);
function TriggerBackendData(){
var value=GetRandomNum(0, 100);
watch1.set("value", value);
watch1.refreshRendering();
watch2.set("value", value);
watch2.refreshRendering();
watch3.set("value", value);
watch3.refreshRendering();
watch4.set("value", value);
watch4.refreshRendering();
};
});
function GetRandomNum(Min,Max)
{
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.round(Rand * Range));
}
</script>
</head>
<body>
<div id="watch1" style="width:200px;height:200px" ></div><br />
<div id="watch2" style="width:200px;height:200px" ></div><br />
<div id="watch3" style="width:600px;height:50px; position: absolute; top: 50px; left: 500px;" ></div><br />
<div id="watch4" style="width:50px;height:600px; position: absolute; top: 10px; left: 300px;" ></div><br />
</body>
</html>
"dojox/dgauges/components/default/CircularLinearGauge",
"dojox/dgauges/components/classic/SemiCircularLinearGauge",
"dojox/dgauges/components/classic/HorizontalLinearGauge",
"dojox/dgauges/components/default/VerticalLinearGauge",
以上代码可以修改一下,全用default 或者全用classic 看看效果。
下面是全用default的效果,即
"dojox/dgauges/components/default/CircularLinearGauge",
"dojox/dgauges/components/default/SemiCircularLinearGauge",
"dojox/dgauges/components/default/HorizontalLinearGauge",
"dojox/dgauges/components/default/VerticalLinearGauge",
此时这段程序成果是这样的:
如果都用classic 即:
"dojox/dgauges/components/classic/CircularLinearGauge",
"dojox/dgauges/components/classic/SemiCircularLinearGauge",
"dojox/dgauges/components/classic/HorizontalLinearGauge",
"dojox/dgauges/components/classic/VerticalLinearGauge",
代码改为black :
"dojox/dgauges/components/black/CircularLinearGauge",
"dojox/dgauges/components/black/SemiCircularLinearGauge",
"dojox/dgauges/components/black/HorizontalLinearGauge",
"dojox/dgauges/components/black/VerticalLinearGauge",
效果
改为green
效果为:
改为gray
效果: