Dojo提供了非常好的仪表盘显示，效果如下：

<!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. Dojo仪表板

    Dojo它提供了一个良好的仪表板显示器,的影响,如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR0lTU2hpWGlTaGVuZw==/font/ ...

  2. Silverlight自定义控件开发：仪表盘

    在项目中,由于使用到了活动积温运算,也就是指当日平均气温稳定上升到10℃以上时,大多数农作物才能活跃生长.把大于等于10℃持续期内的日平均气温累加起来,得到的气温总和,叫做活动积温.所以我决定采用do ...

  3. dojo chart详解

    Dojo提供了一套很完善的统计图(Chart)接口,在dojox/charting下面,可以支持很多种类型的. .简介 Dojo统计图提供快速的.简单的接口实现美观的.交互性强的web统计图表的实现. ...

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

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

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

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

  6. 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 ...

  7. ECharts学习（4）--仪表盘

    1. ECharts中的仪表盘,要使用这个图表时把series中的type属性修改成'gauge',然后在detail中设置仪表盘详情,用于显示数据.最常用的是formatter(格式化函数或者字符串 ...

  8. js库之dojo

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

  9. .Net语言 APP开发平台——Smobiler学习日志：如何在手机上开发仪表盘控件

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的"S ...

随机推荐

  1. java要注意的问题1

    一.优先返回空集合而非null 如果程序要返回一个不包含任何值的集合,确保返回的是空集合而不是null.这能节省大量的”if else”检查. public class getLocationName ...

  2. 数据结构：JAVA实现二叉查找树

    数据结构:JAVA实现二叉查找树 写在前面 二叉查找树(搜索树)是一种能将链表插入的灵活性与有序数组查找的高效性结合在一起的一种数据结构. 观察二叉查找树,我们发现任何一个节点大于左子节点且小于其右子 ...

  3. SpringBoot之Servlet、Filter、Listener配置

    在SpringBoot中是不需要配置web.xml的,那么原来在web.xml中配置的Servlet.Filter.Listener现在怎么弄呢? SpringBoot提供了三种Bean Filter ...

  4. Sybase：SybaseIQ的几个系统过程

    Sybase:SybaseIQ的几个系统过程 sp_iqlocks 显示与数据库中 IQ 存储区和目录存储区中的锁有关的信息. 删除锁:drop connection XXX sp_iqwho 显示所 ...

  5. Tomcat在windows服务器下，将tomcat控制台日志记录到日志文件中

    Tomcat在windows服务器下,将tomcat控制台日志记录到日志文件中 在Linux系统中,Tomcat 启动后默认将很多信息都写入到 catalina.out 文件中,我们可以通过tail  ...

  6. Python3.x：pdf2htmlEX（解析pdf）安装和使用

    Python3.x:pdf2htmlEX(解析pdf)安装和使用 简介 pdf2htmlEX是一款优秀的pdf转换成html的工具: 下载 windows下载地址:http://soft.rubypd ...

  7. Linux 上下左右键变成^A，^B，^C，^D解决方法

    用gedit打开 /etc/vim/vimrc.tiny,将里面的 set compatible 改成 set nocompatible 对于退格键backspace的问题,只需在刚才那句话下面加上一 ...

  8. const,var,let笔记

    js中定义变量的方式有三种const.var.let const 作用域:全局作用域或函数作用域 定义的变量不可修改,且必须初始化 eg: const a= 1; a= 2; console.log( ...

  9. Docker_remote_api未授权访问漏洞

    docker remote  api主要的目的是取代命令行界面, docker client和docker daemon通过unix domain socket进行通信. 默认情况下,只有本机的roo ...

  10. Caffe python利用classify.py实现对单通道(灰度图)的数据进行分类

    比如你在mnist的prototxt中定义图输入是单通道的,也就是channel=1,然后如果直接调用classify.py脚本来测试的话,是会报错,错误跟一下类似. Source param sha ...