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. 网页显示UIWebView（一个）

    1.scalesPageToFit设置为YES,这样web页面会依据屏幕大小进行自己主动缩放. 2.UIWebView的状态监视 //内容读入開始前被调用.将UIWebView,返回no后UIWebV ...

  2. WPF学习（1）WPF概述

    WPF(Windows Presentation Foundation)是微软推出的基于Windows Vista的用户界面框架,属于NET Framework 3.0的一部分.它提供了统一的编程模型 ...

  3. ADT后windows菜单未找到Android SDK Manager和Android Virtual Device Manager该解决方案的选择

    打开今天凌晨ADT准备编译androidproject的时候,突然发现windows菜单下的Android SDK Manager和Android Virtual Device Manager选项不见 ...

  4. 普及windows流氓程序和监控软件

    win7下载更改后无黑屏windows7激活程序v1.0 一个立即安装 美女主播节目,和流行的色情垃圾邮件 安装程序,结果装了很多垃圾节目,输入.日历.文件等. 重新启动机器后,,会弹出广告. .他的 ...

  5. 使用javascript实现html文字不可选

    如何使用js让html该文本是不可选定它?首先想到的是用css选择实现,如下面: -webkit-touch-callout: none; -webkit-user-select: none; -kh ...

  6. Oracle 多行转多列

    Oracle 多行转多列,列值转为列名   前段时间做调查问卷,客户创建自定义问卷内容,包括题目和选项内容; 之后需要到处问卷明细,,,,麻烦来咯 于是到网上到处搜索,没有直接结果;于是又找各种相似的 ...

  7. JavaEE(14) - JPA关联映射

    1. 单向N-1关联映射 2. 单向1-1关联映射 3. 单向1-N关联映射 4. 单向N-N关联映射 5. 双向1-1关联映射 6. 双向1-N关联映射 7. 双向N-N关联映射 1. 单向N-1关 ...

  8. Message解析流程（转）

    Message的解析作为一个共同组件.对应不同格式的msg文件有不同的实现类来解析.用SAXParser. 1:Final class MessageResourceManager   在Start方 ...

  9. Hadoop Streaming 得到mapreduce_map_input_file中遇到的问题的版本号

    1.Hadoop Streaming,您可以在任务获得hadoop设置环境变量, 例如,使用awk书面map从而能获得:filename = ENVIRON["mapreduce_map_i ...

  10. 开发并调试 Mail Add-in

    开发并调试 Mail Add-in (mail app for Outlook) 准备工作 如果你的邮箱搭建在 Exchange Server 上,则可以创建邮件应用程序(Mail Add-in)来扩 ...