Question

我正在尝试用下面的代码实现Gauge控件但是没有得到任何输出虽然当我在html文件中尝试相同时，我得到3规格的输出。

我已更改为$(document).ready()而非window.onload，如链接window.onload Not Working correclty中所述。但它没有帮助。

我是Javascripts或JQuery的初学者。请让我知道如何实现这一目标。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
      body {
        text-align: center;
      }

      #g1, #g2, #g3 {
        width:200px; height:160px;
        display: inline-block;
        margin: 1em;
      }

      p {
        display: block;
        width: 450px;
        margin: 2em auto;
        text-align: left;
      }
    </style>
   <script src="raphael.2.1.0.min.js" type="text/javascript"></script>
    <script src="justgage.1.0.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var g1, g2, g3;

        window.onload = function () {
            var g1 = new JustGage({
                id: "g1",
                value: getRandomInt(350, 980),
                min: 350,
                max: 980,
                title: "Lone Ranger",
                label: "miles traveled"
            });

            var g2 = new JustGage({
                id: "g2",
                value: 32,
                min: 50,
                max: 100,
                title: "Empty Tank",
                label: ""
            });

            var g3 = new JustGage({
                id: "g3",
                value: 120,
                min: 50,
                max: 100,
                title: "Meltdown",
                label: ""
            });

            setInterval(function () {
                g1.refresh(getRandomInt(350, 980));
                g2.refresh(getRandomInt(0, 49));
                g3.refresh(getRandomInt(101, 200));
            }, 2500);
        };
    </script>

    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="g1"></div>
    <div id="g2"></div>
    <div id="g3"></div>
    </div>
    </form>
</body>
</html>

Answer 1

你可以试试jqChart的量表 - http://www.jqchart.com/jquery/gauges

他们有很多例子和丰富的功能。

免责声明：我为jqChart工作。

Best，Maxim Milev

ASP.NET中的Javascript Gauge控件

1 个答案: