zoukankan      html  css  js  c++  java
  • 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="200px;height:200px" ></div><br />
    <div id="watch2" style="200px;height:200px" ></div><br />
    <div id="watch3" style="600px;height:50px; position: absolute; top: 50px; left: 500px;" ></div><br />
    <div id="watch4" style="50px;height:600px; position: absolute; top: 10px; left: 300px;" ></div><br />
    </body>
    </html>


  • 相关阅读:
    226. Invert Binary Tree
    404. Sum of Left Leaves
    112. Path Sum (判断路径和是否等于某值)
    5 用两个栈实现队列
    111. Minimum Depth of Binary Tree
    110. Balanced Binary Tree
    4 重建二叉树
    108. Convert Sorted Array to Binary Search Tree
    235. Lowest Common Ancestor of a Binary Search Tree(LCA最低公共祖先)
    3 从尾到头打印链表
  • 原文地址:https://www.cnblogs.com/lzugis/p/6539882.html
Copyright © 2011-2022 走看看