我正在尝试使用dojo工具包,并且需要显示Grey_CircularLinearGauge。
像这样:http://download.dojotoolkit.org/release-1.8.3/dojo-release-1.8.3/dojox/dgauges/tests/test_Grey_CircularLinearGauge.html


我需要根据此Grey_CircularLinearGauge的值范围添加不同的颜色。例如:从0到30的绿色,从30到70的黄色和从70的红色到100。
像这样:


谁能帮我。

最佳答案

我终于解决了你的问题!
看看这个小提琴:http://jsfiddle.net/v7WwD/
我必须深入研究代码才能运行此代码。

首先,我将div插入html中,将量规连接到:

 <div style="width:300px;height:300px;left:100px;top:100px" id="gauge">
       <br />
 </div>


然后我像这样设置:

  require(["dojox/dgauges/components/grey/CircularLinearGauge"],
     function (CircularLinearGauge) {

 var myGauge = new CircularLinearGauge({
    value: 20,
    minimum: 0,
    maximum: 150,
    majorTickInterval: 25,
    minorTickIntervall: 5,
    indicatorColor: "#000080", //Zeiger
    fillColor: "#FFFFFF"
}, dojo.byId("gauge"));
myGauge.startup();
});


量规的最终创建从这里开始:

  require(["dojo/ready", "dijit", "dojox/dgauges/TextIndicator",
           "dojox/dgauges/LinearScaler","dojox/dgauges/CircularScale",
           "dojox/dgauges/CircularRangeIndicator","dojox/dgauges/CircularValueIndicator"],
 function (ready, dijit, TextIndicator, LinearScaler, CircularScale,
           CircularRangeIndicator,CircularValueIndicator) {
     ready(function () {

  var gauge = dijit.registry.byId("gauge"); // ADAPT THIS TO YOUR GAUGE ID

 gauge.addElement("background", function(g){
    g.createEllipse({
      cx: 100,
      cy: 100,
      rx: 100,
      ry: 100
    }).setFill("#444444");
  });

  // The scaler
  var scaler = new LinearScaler({
    minimum: 0,
    maximum: 150,
    majorTickInterval: 20,
    minorTickInterval: 5
  });

   var scale = new CircularScale({
    scaler: scaler,
    originX: 100,
    originY: 100,
    startAngle: 110,
    endAngle: 70,
    radius: 70,
    labelPosition: "outside",
    tickShapeFunc: function(group, scale, tick){
      return group.createLine({
        x1: tick.isMinor ? 2 : 0,
        y1: 0,
        x2: tick.isMinor ? 8 : 12,
        y2: 0
      }).setStroke({
        color: tick.isMinor ? "black" : "white",
        width: tick.isMinor ? 0.5 : 1
      });
    }
  });
    gauge.addElement("scale", scale);

  // A value indicator
  var indicator = new CircularValueIndicator({
    interactionArea: "indicator",
    indicatorShapeFunc: function(group){
      return group.createPolyline([20, -6, 60, 0, 20, 6, 20, -6]).setFill("black").setStroke("white");
    },
    value: 50
  });
  scale.addIndicator("indicator", indicator);

   //make green range
    var rangeIndicatorGreen = new CircularRangeIndicator({
    start: 0,
    value: 30,
    radius: 62,
    startThickness:5,
    endThickness: 5,
    fill: "green",
    interactionMode: "none"
  });
  scale.addIndicator("rangeIndicatorGreen", rangeIndicatorGreen, true);

   //make yellow range
var rangeIndicatoryellow = new CircularRangeIndicator({
    start: 30,
    value: 70,
    radius: 62,
    startThickness:5,
    endThickness: 5,
    fill: "yellow",
    interactionMode: "none"
  });
  scale.addIndicator("rangeIndicatoryellow", rangeIndicatoryellow, true)

 //make red range
 var rangeIndicatorRed = new CircularRangeIndicator({
    start: 70,
    value: 100,
    radius: 62,
    startThickness:5,
    endThickness: 5,
    fill: "red",
    interactionMode: "none"
  });
  scale.addIndicator("rangeIndicatorRed", rangeIndicatorRed, true);

    // Indicator Text"
   indicator = gauge._elementsIndex.scale._indicators[0];
    var indicatorText = new TextIndicator();
    indicatorText.set("indicator", indicator);
    indicatorText.set("x", 100);
    indicatorText.set("y", 100);
    gauge.addElement("indicatorText", indicatorText);

   });
});


此致Miriam

关于javascript - 如何在DOJO的Grey_CircularLinearGauge中为一系列值添加差异颜色,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19016938/

10-11 06:28
查看更多