JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" data-dojo-config="async: true"></script>
<div style="width:300px;height:300px;left:100px;top:100px" id="gauge">
<br />
</div>
CSS
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css" media="screen">
JavaScript
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...