IBM ゲージ・ウィジェットの使用例

提供されたゲージ・ウィジェットは、数値データをグラフィカルに表示する方法を示しています。 AnalogGaugeBarGraph の 2 つのゲージ・ウィジェットが提供されています。 このトピックのサンプル・コードは、 アナログ・ゲージ棒グラフにも使用できます。

AnalogGauge ウィジェット

アナログ・ゲージ・ウィジェットを使用すると、速度計や圧力計などの円形ゲージに データを表示することができます。アナログ・ゲージを作成するには、まず、ゲージの形、ゲージ上に表示する標識、 ゲージ上に作成する各種の範囲、およびその他の要素を決定します。

<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 は、標識のタイプを示します。 アナログ・ゲージの場合、使用可能な値は arrowline です。 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);

これで棒グラフが完成しました。 ターゲットと値の標識は、ドラッグ・アクションによってグラフから新規値に移動できます。 さらに、棒グラフの下にある値ボックス内の値を変更できます。 アナログ・ゲージの場合と同様に、値を示すこれらのボックスは、使用不可にできます。


AnalogGauge のサンプル・コード:

<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>

BarGraph のサンプル・コード:

<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>