提供されたゲージ・ウィジェットは、数値データをグラフィカルに表示する方法を示しています。 AnalogGauge と BarGraph の 2 つのゲージ・ウィジェットが提供されています。 このトピックのサンプル・コードは、 アナログ・ゲージと棒グラフにも使用できます。
アナログ・ゲージ・ウィジェットを使用すると、速度計や圧力計などの円形ゲージに データを表示することができます。アナログ・ゲージを作成するには、まず、ゲージの形、ゲージ上に表示する標識、 ゲージ上に作成する各種の範囲、およびその他の要素を決定します。
<div dojoType="ibm_gauge.widget.AnalogGauge" id="testGauge" cx=150 cy=175 radius=125></div>
前述のコードは、新規アナログ・ゲージ・ウィジェットを作成します。 これは、testGauge という ID で div 内にあります。 ゲージには現在、範囲、標識、またはティック・マークはありません。 しかし、ゲージのデータ域は、渡されたパラメーターによって示されています。
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'});
このコードは、ゲージに、該当する低、高、および移動の値を伴う 5 つの範囲を追加します。 移動の値は、マウスがその特定の範囲を指したときに表示されます。
for(var i=0; i<=50; i+=5){ g.addIndicator({ value:i, type:'line', length:5, offset:125, label:''+i}); }
これで、ゲージに 5 単位ごとのティック・マークが付きます。これは、短い線と、テキストで表される値で表示されます。 前のメソッドの for ループの方が、個々のティック・マークの値を書き出すよりも効率的なプロセスです。
次に、ゲージに矢印の標識を追加し、それを機能的に完全なものにします。
var valueIndicator = { value:17, type:'arrow', color: 'yellow', length: 135, width: 3, hover:'Value: 17', title: 'Value' }; g.addIndicator(valueIndicator);
渡されるパラメーターについては、『ゲージ参照』のトピックで説明します。 ただし、値パラメーターは、標識が最初に位置するゲージ上の現在の数値を指定します。 type は、標識のタイプを示します。 アナログ・ゲージの場合、使用可能な値は arrow と line です。 length と width は矢印のサイズを示し、 hover と title のパラメーターは標識の属性のテキストを指定します。
var targetIndicator = { value:6, type:'line', color:'red', width: 3, hover:'Target: 6', title: 'Target' }; g.addIndicator(targetIndicator);
ターゲット標識を作成したので、目標または警告のしきい値を指定することもできます。ゲージには標識をいくつでも追加できるので、複数の可能性があります。
このトピックの終わりでコードを実行したり、完全なバージョンを使用した場合、 タイトルの付いた標識には、ゲージの下に数値を示すボックスがあることが分かります。 これらのボックスは、デフォルトで表示されます。 これは、このウィジェットが、例えばスクリーン・リーダーを使用してページを表示し、 それらのボックスにアクセスできるようにするためです。 これらのボックスは、ゲージそのものの hideValues パラメーターを true に設定することにより、使用不可にできます。 しかし、ボックスを使用不可にすると、ウィジェットがアクセス不能になってしまいます。 このパラメーターは、棒グラフ・ウィジェットの場合でも同じです。
棒グラフ・ウィジェットは、数値情報を棒グラフでグラフィカルに示すために使用します。 アナログ・ゲージ・ウィジェットの場合と同様に、複数の可能性があります。 バー、標識、ティック・マーク、テキストなどは、ウィジェットにいくつでも追加できます。 次のマークアップの例を参照してください。
<div dojoType="ibm_gauge.widget.BarGraph" id="testBarGraph" widgetId="testBarGraph" executeScripts="true" gaugeHeight="55" dataY="25" dataHeight="25" dataWidth="225"/>
この例では、棒グラフにグラデーションの背景を追加します。 以下のステップは _Gauge スーパークラスによって処理されるので、 アナログ・ゲージ・ウィジェットにも適用できます。
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;
このコードは、垂直の線形グラデーションを追加します。このグラデーションは、棒グラフの背景の場合、 最初が白で、終わりが薄いグレイになります。3 つのタイプのグラデーションが使用可能です。 詳しくは、『ゲージ参照』トピックを参照してください。
アナログ・ゲージ・ウィジェットの場合と同様に、以下の範囲とティック・マークを追加できます。
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 }); }
最後に、ターゲットと値の標識を追加できます。 棒グラフ・ウィジェットの場合、ターゲット標識は 引き続き line タイプですが、値標識は 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);
これで棒グラフが完成しました。 ターゲットと値の標識は、ドラッグ・アクションによってグラフから新規値に移動できます。 さらに、棒グラフの下にある値ボックス内の値を変更できます。 アナログ・ゲージの場合と同様に、値を示すこれらのボックスは、使用不可にできます。
<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>