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. Debian/Ubuntu 已安装gcc/g++ 4.8.1

    gcc 4.8.1 是第一个全然支持C++11(C++14非常可能在gcc 4.9.0開始支持.)的编译器,Windows上能够安装mingw版的.在sourceforge 上有下载.安装也比較方便. ...

  2. CSS不常见问题汇总

    写css有一段时间了,其间也遇到一些问题,跟大家分享一下 IE10+滚动条自动以藏问题,导致滚动部分页面看起来不正常 html, body {-ms-overflow-style: scrollbar ...

  3. String.Format in Java and C#

    原文:String.Format in Java and C# JDK1.5中,String类新增了一个很有用的静态方法String.format(): format(Locale l, String ...

  4. hdu3480二维斜率优化DP

    Division Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 999999/400000 K (Java/Others) Tota ...

  5. （大数据工程师学习路径）第一步 Linux 基础入门----用户及文件权限管理

    用户及文件权限管理 实验介绍 1.Linux 中创建.删除用户,及用户组等操作. 2.Linux 中的文件权限设置. 一.Linux 用户管理 Linux 是一个可以实现多用户登陆的操作系统,比如“李 ...

  6. Leetcode 动态规划 Candy

    本文senlie原版的,转载请保留此地址:http://blog.csdn.net/zhengsenlie Candy Total Accepted: 16494 Total Submissions: ...

  7. Cisco笔试——2014年

    笔试时间:11月1日(周六)下午13:00-14:10 申请者考场地点:上海市徐汇区梅陇路130号华东理工大学徐汇校区第六教学楼六大 我报的思科的软件开发software,属于(常规) 一共70多道题 ...

  8. 页面加速Chromium 预压 Prerendering

    前者已经推出了一个博客prefetch预加载的网页资源,以提高网页加载速度,下面我们一起来看一下,以加速网页chromium prerendering.介绍prerendering之前.先介绍两个概念 ...

  9. nyoj 517 最小公倍数 【java睑板】

    我写了一个gcd TL该.然后调用math内gcd,AC该... 思维:它是采取n前面的最小公倍数和n求 1~n的最小公倍数 代码: import java.util.Scanner; import ...

  10. Javascript学习1 - Javascript中的类型对象

    原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象. 常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个 ...