Die beiden bereitgestellten Gauge-Fensterobjekte AnalogGauge und BarGraph demonstrieren eine Möglichkeit der grafischen Darstellung numerischer Daten. Der Beispielcode in diesem Abschnitt ist auch für die analoge Messvorrichtung (AnalogGauge) und das Balkendiagramm (BarGraph) verfügbar.
Das analoge Gauge-Fensterobjekt demonstriert eine Möglichkeit, Daten in einer runden Messvorrichtung wie einem Tachometer oder einem Druckmesser anzuzeigen. Wenn Sie eine analoge Messvorrichtung erstellen möchten, müssen Sie zunächst überlegen, welche Form diese Vorrichtung haben soll, welche Anzeiger in der Vorrichtung erscheinen sollen, welche Bereiche Sie erstellen möchten usw.
<div dojoType="ibm_gauge.widget.AnalogGauge" id="testGauge" cx=150 cy=175 radius=125></div>
Der obige Code erstellt ein neues analoges Gauge-Fensterobjekt, das die ID "testGauge" hat und sich an der in den div-Tags angegebenen Position befindet. Bis jetzt hat die Messvorrichtung noch keine Bereiche, Anzeiger oder Teilstriche. Der Datenbereich für die Messvorrichtung wurde jedoch bereits von den übergebenen Parametern angegeben.
var g = dijit.byId("testGauge"); g.addRange({low:0, high:10, hover:'0 - 10'}); g.addRange({low:10, high:20, hover:'10 - 20'}); g.addRange({low:20, high:30, hover:'20 - 30'}); g.addRange({low:30, high:40, hover:'30 - 40'}); g.addRange({low:40, high:50, hover:'40 - 50'});
Dieser Code fügt fünf Bereiche mit geeigneten Werten für "low", "high" und "hover" zur Messvorrichtung hinzu. Der Wert von "hover" wird angezeigt, wenn sich der Mauszeiger auf diesem Bereich befindet.
for(var i=0; i<=50; i+=5){ g.addIndicator({ value:i, type:'line', length:5, offset:125, label:''+i}); }
Jetzt enthält die Messvorrichtung alle fünf Einheiten eine dünne Linie als Teilstrich und eine Textangabe für den Wert. Die for-Schleife in der obigen Methode ist effizienter als das Schreiben der Werte für jeden einzelnen Teilstrich.
Jetzt wird ein Pfeilanzeiger zur Messvorrichtung hinzugefügt, die nun funktional vollständig ist.
var valueIndicator = { value:17, type:'arrow', color: 'yellow', length: 135, width: 3, hover:'Value: 17', title: 'Value' }; g.addIndicator(valueIndicator);
Die übergebenen Parameter wind im Abschnitt mit den Referenzinformationen zu Fensterobjekten beschreiben. Der Parameter value gibt den aktuellen numerischen Wert der Messvorrichtung an, auf dem der Anzeiger anfangs platziert wird. Der Parameter type gibt den Typ des Anzeigers an. Für eine analoge Messvorrichtung können die Werte arrow und line verwendet werden. Die Parameter length und width geben die Größe des Pfeils an und die Parameter hover und title den Text, der dem Anzeiger zugeordnet ist.
var targetIndicator = { value:6, type:'line', color:'red', width: 3, hover:'Target: 6', title: 'Target' }; g.addIndicator(targetIndicator);
Jetzt haben Sie einen Zielanzeiger erstellt und können außerdem den Ziel- oder Warnungsschwellenwert angeben. Hierfür gibt es verschiedene Möglichkeiten, da Sie mehrere Anzeiger zur Messvorrichtung hinzufügen können.
Wenn Sie Ihren Code ausführen oder die vollständige Version am Ende dieses Artikels verwenden, werden Sie feststellen, dass es unter der Messvorrichtung für die Anzeiger mit Titeln Felder gibt, in denen numerische Werte angegeben sind. Diese Felder werden standardmäßig angezeigt, um sicherzustellen, dass auch Personen auf dieses Fensterobjekt zugreifen können, die für die Anzeige der Seite beispielsweise Sprachausgabeprogramme verwenden. Sie können die Felder inaktivieren, indem Sie den Parameter "hideValues" in der Messvorrichtung selbst auf true setzen. Danach kann jedoch nicht mehr auf das Fensterobjekt zugegriffen werden. Derselbe Parameter wird auch für das Balkendiagramm verwendet.
Dieses Fensterobjekt wird verwendet, um numerische Daten grafisch in einem Balkendiagramm anzuzeigen. Wie bei dem analogen Gauge-Fensterobjekt gibt es verschiedene Möglichkeiten, dieses Fensterobjekt zu erstellen. Sie können beliebig viele Balken, Anzeiger, Teilstriche, Textangaben usw. zum Fensterobjekt hinzufügen. Sehen Sie sich hierzu die folgende Beispiel-Markup an:
<div dojoType="ibm_gauge.widget.BarGraph" id="testBarGraph" widgetId="testBarGraph" executeScripts="true" gaugeHeight="55" dataY="25" dataHeight="25" dataWidth="225"/>
Mit diesem Beispiel fügen Sie einen Hintergrundverlauf zum Balkendiagramm hinzu. Die folgenden Schritte werden von der Superklasse _Gauge ausgeführt und können somit auch auf das analoge Gauge-Fensterobjekt angewendet werden.
var bg = dijit.byId("testBarGraph"); var fill = { type: "linear", x1: bg.gaugeWidth/2, x2: bg.gaugeWidth/2, y2: 0, y1: bg.gaugeHeight, colors: [{offset: 0, color: "#ECECEC"}, {offset: 1, color: "white"}] }; bg.gaugeBackground = fill;
Dieser Code fügt als Hintergrund des Balkendiagramms einen vertikalen linearen Verlauf hinzu, der weiß beginnt und hellgrau endet. Es sind drei Arten von Verläufen verfügbar. Weitere Informationen hierzu enthält der Abschnitt mit den Referenzinformationen zu Fensterobjekten.
Wie beim analogen Gauge-Fensterobjekt können Sie die folgenden Bereiche und Teilstriche hinzufügen:
bg.addRange({low:0, high:10, hover:'0 - 10'}); bg.addRange({low:10, high:20, hover:'10 - 20'}); bg.addRange({low:20, high:30, hover:'20 - 30'}); bg.addRange({low:30, high:40, hover:'30 - 40'}); bg.addRange({low:40, high:50, hover:'40 - 50'}); for(var i=0; i<=50; i+=5){ bg.addIndicator({ value:i, type:'line', length:5, offset:-5, width: 1, label:''+i }); }
Zum Schluss können Sie noch einen Zielanzeiger und einen Wertanzeiger hinzufügen. Der Zielanzeiger für das Balkendiagramm ist vom Typ line, der Wertanzeiger ist jedoch vom Typ bar.
var valueIndicator = { value:17, type:"bar", width: 7, hover:'Value: 17', title: 'Value' } bg.addIndicator(valueIndicator); var targetIndicator = { value:22, type:"line", color:'#D00000', hover:'Target: 22', title: 'Target' } bg.addIndicator(targetIndicator);
Das Balkendiagramm ist jetzt vollständig. Der Zielanzeiger und der Wertanzeiger können mit der Maus auf neue Werte im Diagramm verschoben werden. Außerdem können Sie die Werte in den Feldern unterhalb des Balkendiagramms ändern. Diese Felder mit den Wertangaben können wie beim analogen Gauge-Fensterobjekt inaktiviert werden.
<div dojoType="ibm_gauge.widget.AnalogGauge" id="testGauge" cx=150 cy=175 radius=125></div> <script> dojo.addOnLoad(function(){ var g = dijit.byId("testGauge"); g.addRange({low:0, high:10, hover:'0 - 10'}); g.addRange({low:10, high:20, hover:'10 - 20'}); g.addRange({low:20, high:30, hover:'20 - 30'}); g.addRange({low:30, high:40, hover:'30 - 40'}); g.addRange({low:40, high:50, hover:'40 - 50'}); for(var i=0; i<=50; i+=5){ g.addIndicator({ value:i, type:'line', length:5, offset:125, label:''+i}); } var valueIndicator = { value:17, type:'arrow', color:'yellow', length: 135, width: 3, hover:'Value: 17', title: 'Value' }; g.addIndicator(valueIndicator); var targetIndicator = { value:6, type:'line', color:'red', width: 3, hover:'Target: 6', title: 'Target' }; g.addIndicator(targetIndicator); }); </script>
<div dojoType="ibm_gauge.widget.BarGraph" id="testBarGraph" widgetId="testBarGraph" gaugeHeight="55" dataY="25" dataHeight="25" dataWidth="225"/> <script> dojo.addOnLoad(function(){ var bg = dijit.byId("testBarGraph"); var fill = { type: "linear", x1: bg.gaugeWidth/2, x2: bg.gaugeWidth/2, y2: 0, y1: bg.gaugeHeight, colors: [{offset: 0, color: "#ECECEC"}, {offset: 1, color: "white"}] }; bg.gaugeBackground = fill; bg.addRange({low:0, high:10, hover:'0 - 10'}); bg.addRange({low:10, high:20, hover:'10 - 20'}); bg.addRange({low:20, high:30, hover:'20 - 30'}); bg.addRange({low:30, high:40, hover:'30 - 40'}); bg.addRange({low:40, high:50, hover:'40 - 50'}); for(var i=0; i<=50; i+=5){ bg.addIndicator({ value:i, type:'line', length:5, offset:-5, width: 1, label:''+i }); } var valueIndicator = { value:17, type:"bar", width: 7, hover:'Value: 17', title: 'Value' } bg.addIndicator(valueIndicator); var targetIndicator = { value:22, type:"line", color:'#D00000', hover:'Target: 22', title: 'Target' } bg.addIndicator(targetIndicator); }); </script>