Dojo它提供了一个良好的仪表板显示器,的影响,如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR0lTU2hpWGlTaGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

<!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>

版权声明:本文博客原创文章。博客,未经同意,不得转载。

Dojo仪表板的更多相关文章

  1. AngularJs2与AMD加载器(dojo requirejs)集成

    现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运 ...

  2. Dojo前端开发框架与jQuery前端开发框架,对比分析总结

    最近Dojo和jQuery双双发布了最新的1.8版本,有着相同版本号的两个Javascript库也有许多核心的相同之处:相同的资源加载机制AMD.相同的选择器 引擎Sizzle等.作为业界知名的Jav ...

  3. Dojo: Quick Start

      1.Dojo学习地址 2.Dojo快速开始 2.1.Dojo引入 2.2.指定Dojo模块的位置 2.3.模块加载require 3.查找Dom节点 3.1.根据id查找dom节点 3.2.根据c ...

  4. js库之dojo

    使用dojo源代码 1.下载Dojo 2.dojo目录结构如下 demo/ myModule.js dojo/ dijit/ dojox/ util/ hellodojo.html 3.引入dojo. ...

  5. dojo.require()的相关理解

    Dojo 提供了一个非常强大的javascript控件库. 在使用dojo之前,用户基本上不需要具备任何基础知识. 你可以用script远程链接到dojo(dojo.js), 也可以把dojo.js下 ...

  6. dojo tree edit的使用[前端]

    var store = new mydata.JsonRestStore({ target: "<%=ResolveUrl("~/uieditserver.ashx" ...

  7. 【原创】(AMD)JavaScript模块化开发(dojo)

    AMD原理等在这里就不进行说明了,作者也是菜鸟一枚,只是对自己的一个实例进行说明,如有错误,望指出. 首先,先推荐一篇AMD方面的文章,有兴趣的可以参考:http://efe.baidu.com/bl ...

  8. 开始学习Dojo

    学习:Dojo入门简易教程 Dojo Toolkit 简介 Dojo 于 2004 年创建,使开发 DHTML 和 JavaScript web 应用程序开发流程更为容易,隐藏了很多现代 web 浏览 ...

  9. understand dojo/domReady!

    require(["dojo/dom", "dojo/domReady!"], function(dom){ dom.byId("helloworld ...

随机推荐

  1. 设备11g_rac配置对等

    linux平台安装oracle 11gssh同等配置简单 构造grid用户任关系 登陸rac1,rac2分别运行: $ su - grid $mkdir ~/.ssh $chmod 700 ~/.ss ...

  2. Tri_integral Summer Training 5 总结

    比赛 题目 B D E G H I J 这是泰国的一场区域赛,除了C题英语非常抽以外,其余题目还不算难读. 一开场就发现了三道很水的题目,0:21:34就把三道题给过了,都是1A,赞Moor的手速. ...

  3. 微信oauth获取用户的信息页面授权

    參考链接(请在微信client中打开此链接体验) Scope为snsapi_base https://open.weixin.qq.com/connect/oauth2/authorize?appid ...

  4. navicat如何导入sql文件

    工具--数据的传输--文件 版权声明:本文博客原创文章,博客,未经同意,不得转载.

  5. 采用Visual Stuidio 2010 创建网站栏

    采用Visual Stuidio 2010 创建网站栏 Visual Stuidio 2010 该项目模板使创建网站栏/内容类型和列表变得非常方便. 1. 管理员身份打开Visual Stuidio ...

  6. 批处理添加iis wpg、users对IIS的访问权限

    原文 批处理添加iis wpg.users对IIS的访问权限 上一篇,我们学习了如何使用批处理删除各种帐户在IIS中的访问权限.下面,我们来看看,如何通过批处理添加iis_wpg.users对IIS的 ...

  7. JavaEE(7) - JMS消息事务和异常

    1. 使用事务性Session为消息增加事务(NetBeans创建java project: TxSession) MessageSender.java package lee; import jav ...

  8. 记录这一刻:百度搜索结果“文件格式:-HTML文本”

    只要百度搜索关键词无论结果是"文件格式:-HTML文本",现在,这个问题已经被修复. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG ...

  9. CSS3添加属性选择: [attribute*=value] 、[attribute^=value] 和[attribute$=value]

    在CSS3新的 [attribute*=value] .[attribute^=value] 和[attribute$=value] 三个选择.使得属性选择使用通配符概念. 下面是利用这三个属性样本代 ...

  10. 在CentOS 7上安装phpMyAdmin

    原文 在CentOS 7上安装phpMyAdmin phpMyAdmin是一款以PHP为基础,基于Web的MySQL/MariaDB数据库管理工具.虽然已经存在着一些诸如Adminer的轻量级数据库管 ...