2012-10-11 22 views
1

我想從http://dojotoolkit.org/reference-guide/1.8/dojox/widget/AnalogGauge.html#speedometer-style-gauge-with-arc-indicator-and-needle-indicator 嘗試一個簡單的例子最初它不工作,因爲它無法找到dijit。我正在與想起來的代碼如下Dojo模擬量表不工作

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

從瀏覽器控制檯窗口中,我可以找出以下錯誤「遺漏的類型錯誤:無法讀取屬性」(後<頭>片斷)」未定義道場的_Gauge「。但是我無法弄清楚我錯了什麼地方。 請提供一些幫助。

回答

0

好像你需要把

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

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

如果我將dojox/widget/AnalogGauge更改爲dojox/gauges/AnalogGauge,它會突然生效。

我不完全確定發生了什麼,但我的猜測是它在dojox/gauges/AnalogGauge.js文件中的「./_Gauge」的相對路徑上發生了變化。

我知道這個問題有點舊了,但是在dojo 1.9中問題仍然很突出,而且當我搜索解決方案時,這個頁面排名第一,我想我會記錄我在這裏找到的。