Question

我正在尝试http://dojotoolkit.org/reference-guide/1.8/dojox/widget/AnalogGauge.html#speedometer-style-gauge-with-arc-indicator-and-needle-indicator中的一个简单示例最初它没有工作，因为它找不到dijit。我正在尝试的代码如下（＆lt; head＆gt;之后的片段）

<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>

从浏览器控制台窗口，我可以找到以下错误“未捕获的TypeError：无法读取属性”''_Gauge''未定义的dojo“。但我无法得到我错的地方。请提供一些帮助。

Answer 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>

Answer 2

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

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

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

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

Dojo模拟测量仪不工作

2 个答案: