Dojo仪表盘

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>
时间: 2024-10-23 13:43:27

Dojo仪表盘的相关文章

Silverlight自定义控件开发:仪表盘

在项目中,由于使用到了活动积温运算,也就是指当日平均气温稳定上升到10℃以上时,大多数农作物才能活跃生长.把大于等于10℃持续期内的日平均气温累加起来,得到的气温总和,叫做活动积温.所以我决定采用dojo的原生仪表盘的图片素材进行封装,作出一个silverlight版本来.下面是其界面截图和具体的调用方法: 调用方法如下: 1: Data d = new Data(); 2: d.Val = 40; 3:   4: var uc = new ChartControl(d); 5: Test.Ch

dojo chart详解

Dojo提供了一套很完善的统计图(Chart)接口,在dojox/charting下面,可以支持很多种类型的. 1.简介 Dojo统计图提供快速的.简单的接口实现美观的.交互性强的web统计图表的实现. 1.1 基本图表 下面的代码展示的是如何用html和dojo实现一个简单的统计图. HTML: <divid="simplechart"style="width: 250px; height: 150px; margin: 5px auto0px auto;"

为什么会有jQuery、Dojo、Ext、Prototype、YUI、Zepto这么多JS包?

目前流行的JS框架很多Dojo .Scriptaculous .Prototype .yui-ext .Jquery .Mochikit.mootools .moo.fx 等.当然还有很多我都不熟悉的框架,就没有列举. 很多人会在坛子里问,到底哪个框架好呢?哪个框架更牛x呢? 哪个框架OO 更舒服呢? 个人觉得,这是一个新手很容易犯的错误逻辑. 世界上任何东西,任何工具,都没有最好的这一个说法,只有适合和不适合. 我们要根据我们项目的真实需要来选择具有相关特性的框架. 一.JQuery推荐级别:

dojo学习(一)入门

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>validationTextbox</title> <head> <title>Dojo: Hello World!</title> <style type="text/cs

Android自定义view之仿支付宝芝麻信用仪表盘

自定义view练习 仿支付宝芝麻信用的仪表盘 对比图: 首先是自定义一些属性,可自己再添加,挺基础的,上代码 <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="RoundIndicatorView"> <!--最大数值--> <attr name="maxNum" form

Dojo Configuration-dojo/_base/config

使用dojoConfig(djConfig)对Dojo进行全局配置以控制其默认行为. dojo.config在Dojo启动过程中使用,有以下三种方式可以修改其默认值: 在引入Dojo核心模块的script标签中定义data-dojo-config属性并设定其值. 在引入Dojo核心模块之前定义dojoConfig对象. 自行编译Dojo. 1 <script src="/dojo/dojo/dojo/dojo.js" data-dojo-config="has:{'do

dojo/query源码解析

dojo/query模块是dojo为开发者提供的dom查询接口.该模块的输出对象是一个使用css选择符来查询dom元素并返回NodeList对象的函数.同时,dojo/query模块也是一个插件,开发者可以使用自定义的查询引擎,query模块会负责将引擎的查询结果包装成dojo自己的NodeList对象. require(["dojo/query!sizzle"], function(query){ query("div")... 要理解这个模块就要搞清楚两个问题:

[转]掌握 Dojo 工具包,第 2 部分: XHR 框架与 Dojo

作者:secooler 快乐的DBA Ajax 的兴起改变了传统的 B/S 结构应用程序中以页面为单位的交互模式,Ajax 引入的局部刷新机制带来了更好的用户体验,促使浏览器中的页面开始向应用程序发展,Google Mail, Google Reader 是在这种趋势下诞生的典型应用. Dojo 提供了基于 XmlHttpRequest 的对象的 XHR 框架来支持异步 Ajax 调用,另外 Dojo.io 包中提供了两种浏览器与服务器交互的方式:iframe. 隐藏框架和 script. 动态

dojo的TabContainer中增加的ContentPane如果是closable,如何在关闭后不销毁ContentPane

主要思路是新建TabContainer的扩展类,重载其closeChild属性,使得其在关闭子容器时,不调用该子容器的destroyRecursive方法. define([ "dojo/_base/declare", "dijit/layout/TabContainer" ], function(declare,TabContainer) { return declare("comm.comm.ExTabContainer", TabConta