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. Grant的时候报错的解决：Access denied for user &#39;root&#39;@&#39;localhost&#39; (using password: YES)

    mysql> grant all on *.* to 'root'@'192.168.1.1' identified by 'password'; ERROR 1045 (28000): Acc ...

  2. 设计模式 Template Method模式 显示程序猿的一天

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/26276093 不断设计模式~ Template Method模式 老套路,看高清 ...

  3. 当一个线程进入一个对象的一个synchronized方法后，其它线程是否可进入此对象的其它方法(转)

    对象的synchronized方法不能进入了,但它的其他非synchronized方法还是可以访问的 对每一个class只有一个thread可以执行synchronized static method ...

  4. HDU2451:Simple Addition Expression

    Problem Description A luxury yacht with 100 passengers on board is sailing on the sea in the twiligh ...

  5. Dev GridView RowCellClick活动MouseDown事件

    GridView可编辑.在无声的思想左键点击"进入编辑". 将GridView的OptionsColumn.AllowEdit至false离开时触发RowCellClick. 但有 ...

  6. linux下一个apache+tomcat负载均衡和集群

    先说一下我的环境 一个ubuntu虚拟机, 一个apache2.2示例 两tomcat1.7示例 1.安装apacheserver sudo apt-get install apache2 假设要重新 ...

  7. 写的好帮手项目官员 - Evernote 5.4(Evernote的) 中国绿色版

    Evernote (中国名:Evernote的) 是一个自由和优秀的笔记软件或个人知识管理软件.它可以帮助你有效地管理所有类型的电子票据.信息等:xbeta 我写了很多信息化管理或 Evernote ...

  8. Testin一日游实验室发布的行级APP质量报告:在那里拍携程双赢

    Testin实验室公布国庆出行旅途类APP质量报告:携程力压去哪儿夺冠 2014/09/28 · Testin · 实验室报告 一年一度的十一黄金周即将临近,旅游软件成为每外出行人手机必装软件.为此全 ...

  9. tmp1

    program1: Line # Mem usage Increment Line Contents================================================ 2 ...

  10. UVA 10870 - Recurrences(矩阵高速功率)

    UVA 10870 - Recurrences 题目链接 题意:f(n) = a1 f(n - 1) + a2 f(n - 2) + a3 f(n - 3) + ... + ad f(n - d), ...