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>


  • 相关阅读:
    VysorPro助手
    Play 2D games on Pixel running Android Nougat (N7.1.2) with Daydream View VR headset
    Play 2D games on Nexus 6P running Android N7.1.1 with Daydream View VR headset
    Native SBS for Android
    ADB和Fastboot最新版的谷歌官方下载链接
    How do I install Daydream on my phone?
    Daydream Controller手柄数据的解析
    蓝牙BLE传输性能及延迟分析
    VR(虚拟现实)开发资源汇总
    Android(Java)控制GPIO的方法及耗时分析
  • 原文地址:https://www.cnblogs.com/lzugis/p/6539882.html
Copyright © 2011-2022 走看看