我正在尝试使用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/