dojo仪表盘大全

最新推荐文章于 2024-08-28 21:55:50 发布

superfreak

最新推荐文章于 2024-08-28 21:55:50 发布

阅读量85

点赞数

分类专栏： Javascript Dojo 文章标签： r语言 javascript

本文链接：https://blog.csdn.net/superfreak/article/details/120848770

版权

Dojo 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

Javascript

19 篇文章 0 订阅

订阅专栏

本文提供require 路径和 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>


            "dojox/dgauges/components/default/CircularLinearGauge",
            "dojox/dgauges/components/classic/SemiCircularLinearGauge",
            "dojox/dgauges/components/classic/HorizontalLinearGauge",
            "dojox/dgauges/components/default/VerticalLinearGauge",

以上代码可以修改一下，全用default 或者全用classic 看看效果。

下面是全用default的效果，即

            "dojox/dgauges/components/default/CircularLinearGauge",
            "dojox/dgauges/components/default/SemiCircularLinearGauge",
            "dojox/dgauges/components/default/HorizontalLinearGauge",
            "dojox/dgauges/components/default/VerticalLinearGauge",

此时这段程序成果是这样的：

如果都用classic 即：

            "dojox/dgauges/components/classic/CircularLinearGauge",
            "dojox/dgauges/components/classic/SemiCircularLinearGauge",
            "dojox/dgauges/components/classic/HorizontalLinearGauge",
            "dojox/dgauges/components/classic/VerticalLinearGauge",

代码改为black ：

            "dojox/dgauges/components/black/CircularLinearGauge",
            "dojox/dgauges/components/black/SemiCircularLinearGauge",
            "dojox/dgauges/components/black/HorizontalLinearGauge",
            "dojox/dgauges/components/black/VerticalLinearGauge",

效果

改为green

效果为：

改为gray

效果：

superfreak

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dojo仪表盘大全

本文提供require 路径和 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">&lt
复制链接

扫一扫

专栏目录