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. Nginx搭建反向代理服务器过程详解（转）

    一.反向代理 我们都知道,80端口是web服务的默认端口,其他主机访问web服务器也是默认和80端口进行web交互,而一台服务器也只有一个80端口,这是约定俗成的标准. 我们来看下面两个场景: 1.服 ...

  2. Android图表日历控件组件

    1.图表引擎 - AChartEngine AChartEngine是一款基于Android的图表绘制引擎,它为Android开发人员提供了非常多有用的图表绘制工具类,假设你须要在Android应用中 ...

  3. 国内Android应用推广的六大主流方式

    国内Android应用推广的六大主流方式 http://mobi.baike.com/article-19433.html 随着Android市场份额的飞速增长,越来越多的国内开发团队和公司開始投入A ...

  4. BZOJ 3362 POJ 1984 Navigation Nightmare 并与正确集中检查

    标题效果:一些养殖场是由一些南北或东西向的道路互连. 镶上在不断的过程中会问两个农场是什么曼哈顿的距离,假设现在是不是通信.那么输出-1. 思维:并与正确集中检查,f[i]点i至father[i]距离 ...

  5. IDEA14中安装go语言插件

    在IntelliJ IDEA14中安装go语言插件 go语言的集成开发环境仍不成熟,试用了liteide,感觉很不适应,弹出菜单对程序员的干扰太大.所以就试大牌的IntelliJ IDEA,这工具本来 ...

  6. Mapxtreme C#鹰眼地图

    Demo演示程序下载地址: http://pan.baidu.com/s/1jG9gKMM#dir/path=%2F%E4%BA%A7%E5%93%81%2FDemos 找:EagelEyeMap.r ...

  7. JDK的dt.jar和Java BeanInfo接口

    在JAVA_HOME/lib以下有两个比較重要的jar文件.tools.jar和dt.jar. tools.jar在上篇文章中做了简单的介绍.这里来介绍下dt.jar. 在Oracle官方站点搜dt. ...

  8. jQuery.reveal弹出层

    jQuery.reveal弹出层使用 最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说 ...

  9. POJ2299 Ultra-QuickSort 【树阵】+【hash】

    Ultra-QuickSort Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 39529   Accepted: 14250 ...

  10. 表与表的关系把RD搞乱了，记一个Procedure中的bug

    就是6张表的关联查询,写了一个存储过程,使用4层for来处理 bug:最后一个for中,两张表的关联条件少了一个,结果数据多查了. 排查办法:使用dbms_output.printline('');每 ...