Dojo 模拟量表不工作答案

【问题标题】：Dojo Analog gauge not workingDojo 模拟量表不工作
【发布时间】：2012-10-11 08:01:10
【问题描述】：

我正在尝试来自http://dojotoolkit.org/reference-guide/1.8/dojox/widget/AnalogGauge.html#speedometer-style-gauge-with-arc-indicator-and-needle-indicator 的一个简单示例最初它无法正常工作，因为它找不到 dijit。我正在尝试的代码如下（

之后的 sn-p ）

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.3/dijit/themes/claro/claro.css" media="screen">
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js"></script>
<meta charset="utf-8">
    <script>
        dojoConfig = {
            parseOnLoad : true
        }
    </script>
    <script>
        dojo.require("dojox.widget.AnalogGauge");
        dojo.require("dijit.Dialog");
        dojo.require("dojox.widget.gauge.AnalogArcIndicator");
        dojo.require("dojox.widget.gauge.AnalogNeedleIndicator");

        dojo.ready(function() {
            var gauge = dijit.byId('speedo');
            // Used for a gradient arc indicator below:
            var fill = {
                'type' : 'linear',
                'x1' : 50,
                'y1' : 50,
                'x2' : 350,
                'y2' : 350,
                'colors' : [{
                    offset : 0,
                    color : 'black'
                }, {
                    offset : 0.5,
                    color : 'black'
                }, {
                    offset : 0.75,
                    color : 'yellow'
                }, {
                    offset : 1,
                    color : 'red'
                }]
            };
            gauge.addIndicator(new dojox.widget.gauge.AnalogArcIndicator({
                'value' : 200,
                'width' : 20,
                'offset' : 150,
                'color' : fill,
                'noChange' : true,
                'hideValues' : true
            }));
            gauge.addIndicator(new dojox.widget.gauge.AnalogArcIndicator({
                'value' : 80,
                'width' : 10,
                'offset' : 150,
                'color' : 'blue',
                'title' : 'Arc',
                'hover' : 'Arc: 80'
            }));
            gauge.addIndicator(new dojox.widget.gauge.AnalogNeedleIndicator({
                'value' : 100,
                'width' : 8,
                'length' : 150,
                'color' : 'red',
                'title' : 'Needle',
                'hover' : 'Needle: 100'
            }));
        });
    </script>
</head>
<body class="claro">
    <div data-dojo-type="dojox.widget.AnalogGauge"
    id='speedo'
    width="450"
    height="300"
    cx="225"
    cy="175"
    radius="150"
    startAngle="-135"
    endAngle="135"
    useRangeStyles="0"
    hideValues="true"
    color: "white"
    majorTicks="{length: 10, offset: 105, interval: 10, color: 'gray'}"
    minorTicks="{length: 5, offset: 105, interval: 5, color: 'gray'}">
        <div data-dojo-type="dojox.widget.gauge.Range"
        low="0"
        high="100"
        color="{'color': 'black'}"></div>
        <div data-dojo-type="dojox.widget.gauge.Range"
        low="100"
        high="200"
        color="{'color': 'black'}"></div>
    </div>
</body>

从浏览器控制台窗口中，我可以找到以下错误“Uncaught TypeError: Cannot read property "'_Gauge"' of undefined dojo”。但是我无法找到出错的地方。请为此提供一些帮助。

【问题讨论】：

标签： dojo

【解决方案1】：

看来你需要放置

<script>
    dojoConfig = {
        parseOnLoad : true
    }
</script>

在包含 dojo.js 脚本之前。您还需要要求 dojo.parser 并删除对 dijit.Dialog 的要求。我不确定dijit.Dialog 在做什么，但它似乎正在影响dojox.widget.AnalogGauge。进行这些更改后，我似乎能够加载并看到您的示例正常工作。以下是您示例的完整编辑版本。

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.3/dijit/themes/claro/claro.css" media="screen">
<script>
    dojoConfig = {
        parseOnLoad : true
    }
</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js"></script>
<meta charset="utf-8"> 
<script>
    dojo.require("dojo.parser");
    dojo.require("dojox.widget.AnalogGauge");
    dojo.require("dojox.widget.gauge.AnalogArcIndicator");
    dojo.require("dojox.widget.gauge.AnalogNeedleIndicator");

    dojo.ready(function() {
        var gauge = dijit.byId('speedo');
        // Used for a gradient arc indicator below:
        var fill = {
            'type' : 'linear',
            'x1' : 50,
            'y1' : 50,
            'x2' : 350,
            'y2' : 350,
            'colors' : [{
                offset : 0,
                color : 'black'
            }, {
                offset : 0.5,
                color : 'black'
            }, {
                offset : 0.75,
                color : 'yellow'
            }, {
                offset : 1,
                color : 'red'
            }]
        };
        gauge.addIndicator(new dojox.widget.gauge.AnalogArcIndicator({
            'value' : 200,
            'width' : 20,
            'offset' : 150,
            'color' : fill,
            'noChange' : true,
            'hideValues' : true
        }));
        gauge.addIndicator(new dojox.widget.gauge.AnalogArcIndicator({
            'value' : 80,
            'width' : 10,
            'offset' : 150,
            'color' : 'blue',
            'title' : 'Arc',
            'hover' : 'Arc: 80'
        }));
        gauge.addIndicator(new dojox.widget.gauge.AnalogNeedleIndicator({
            'value' : 100,
            'width' : 8,
            'length' : 150,
            'color' : 'red',
            'title' : 'Needle',
            'hover' : 'Needle: 100'
        }));
    });
</script>
</head>
<body class="claro">
    <div data-dojo-type="dojox.widget.AnalogGauge"
         id='speedo'
         width="450"
         height="300"
         cx="225"
         cy="175"
         radius="150"
         startAngle="-135"
         endAngle="135"
         useRangeStyles="0"
         hideValues="true"
         color: "white"
         majorTicks="{length: 10, offset: 105, interval: 10, color: 'gray'}"
         minorTicks="{length: 5, offset: 105, interval: 5, color: 'gray'}">
    <div data-dojo-type="dojox.widget.gauge.Range"
                 low="0"
                 high="100"
                 color="{'color': 'black'}"></div>
            <div data-dojo-type="dojox.widget.gauge.Range"
                 low="100"
                 high="200"
                 color="{'color': 'black'}"></div>
     </div>
</body>

【讨论】：

【解决方案2】：

我看到 dojox/widget/AnalogGauge.js 的 Javascript 文件只是到 dojox/gauges/AnalogGauge 的映射。

如果我将 dojox/widget/AnalogGauge 更改为 dojox/gauges/AnalogGauge，它会突然起作用。

我不完全确定发生了什么，但我的猜测是它在 dojox/gauges/AnalogGauge.js 文件中的“./_Gauge”的相对路径上出现问题。

我知道这个问题有点老了，但是在dojo 1.9中这个问题仍然很突出，而且由于这个页面在我搜索解决方案时排名第一，所以我想我会在这里记录我找到的内容。

【讨论】：