IBM ゲージ・ウィジェットの参照


_Gauge スーパークラス

このオブジェクトは、アナログ・ゲージ・ウィジェットと棒グラフ・ウィジェットのスーパークラスです。 このオブジェクトは、これら 2 つのウィジェット間で共通する機能をすべて提供します。 この中には、基本面の作図、ほとんどのマウス・イベントの処理などが含まれます。 以下の共通する変数と関数が使用可能です。

オブジェクトの変数
数値 gaugeWidth ページ上に作成する面の幅。 ピクセルで表示されます。
数値 gaugeHeight ページ上に作成する面の高さ。 ピクセルで表示されます。
ストリング|オブジェクト gaugeBackground ゲージの背景に適用する色。 一般には、CSS スタイルの色 (#e0e0e0 など) です。 この色を使用して、オブジェクトを塗りつぶします。 を参照してください。
数値 gaugeMin ゲージに表示される最小値。
数値 gaugeMax ゲージに表示される最大値。
ストリング image ゲージの背景として使用する URL。
数値 imageX イメージを配置する x 座標。 デフォルト値は 0 で、左下隅の位置を示します。
数値 imageY イメージを配置する y 座標。 デフォルト値は 0 で、左下隅の位置を示します。
数値 imageWidth 前述のイメージの幅。 イメージを使用する場合は、このイメージの値を表示するように指定する必要があります。
数値 imageHeight 前述のイメージの高さ。 イメージを使用する場合は、このイメージの値を表示するように指定する必要があります。
ブール imageOverlay 前述のイメージが、背景ではなくオーバーレイであるかどうか。
数値 useRangeStyles CSS スタイルを使用して範囲の色を示すかどうか。
ブール hideValues テキスト・ボックスをゲージの下に隠し、標識の値を表示するかどうか。

gaugeBackground

この変数は、マークアップで宣言的に設定する場合は、ストリングでしか設定できません。 これは通常、CSS スタイルの色ストリング (グレイまたは #e0e0e0 など) です。 しかし、JavaScript では、gaugeBackground 変数を塗りつぶしオブジェクトに設定して、 dojox.gfx の塗りつぶしオブジェクト定義を実行することができます。 線形の塗りつぶしオブジェクトでは、以下のようになると思われます。

{
type: "linear", 
x1: 0, // x-position to start the first color
y1: 0, // y-position to start the first color
x2: 100, // x-position to end the second color
y2: 100, // x-position to end the second color
colors: [{offset: 0, color: "black"}, // the first color
	 {offset: 1, color: "white"}] // the second color
}
ゲージの終わりから始まりにかけて、グレイから白へのグラデーションを設定するには、 次のコードを入力する必要があります。
var gauge = dijit.byId("testGauge");
var fill = new Object();
fill.type = "linear";
fill.x1 = 0;
fill.x2 = 0;
fill.y2 = 0;
fill.y1 = gauge.gaugeHeight;
fill.colors = [{offset: 0, color: "#ECECEC"}, {offset: 1, color: "white"}];
gauge.gaugeBackground = fill;


useRangeStyles

この変数のデフォルト値は 0 で、組み込みの範囲色が使用されることを示します。 しかし、0 より大きい値を指定した場合は、その番号の CSS クラスである ibmGaugeRange1、 ibmGaugeRange2 などが範囲のスタイルに使用されます。 このフィーチャーは、Internet Explorer では機能しません。 CSS クラスのプロパティーを以下の例に示します。

.ibmGaugeRange1 {
	fill: #808080 ;
	stroke: #808080 ;
}
ご覧のように、これらは、HTML スタイルではなく Scalable Vector Graphics (SVG) スタイルです。 背景色などの属性は、無効です。


hideValues

デフォルトでは、hideValues 変数は false に設定されますが、 これは、ゲージに追加された各標識ごとに、 ゲージ面の下にあるテキスト・ボックスが表示されることを意味します。 この場合、その標識の値はテキスト値として示されます。 このフィーチャーは、アクセシビリティーを目的としており、 この変数を true に設定すると、このゲージは「アクセス不能」になります。 これらのテキスト・ボックスが使用不可になっている場合、 ゲージの値にアクセスできない読者もいるため、これは重要な考慮事項です。


オブジェクトの関数
void addRange(Object range)
このゲージ・ウィジェットに範囲を追加します。
void addRanges(Array ranges)
このゲージに範囲オブジェクトのコレクションを追加します。
void moveIndicatorToFront(Object indicator)
所定の標識をゲージの始めに移動します。
void drawText(String txt, Number x, Number y, String align, String vAlign)
ゲージ上にテキストを描きます。
void removeText(String t)
所定のテキストをゲージから除去します。
void updateTooltip(String text)
ゲージの吹き出しヘルプを所定のテキストで更新します。
void handleMouseOver(Object event)
マウス・サポート。
void handleMouseOut(Object event)
マウス・サポート。
void handleMouseDown(Object event)
マウス・サポート。
void handleMouseUp(Object event)
マウス・サポート。
void handleMouseMove(Object event)
マウス・サポート。

関数の詳細
addRange

addRanges

moveIndicatorToFront

drawText

removeText

updateTooltip

handleMouseOver

handleMouseOut

handleMouseDown

handleMouseUp

handleMouseMove

以下のウィジェット (範囲、グラデーション、グラデーション色、および標識) は、主にゲージをマークアップで宣言的に作成するために使用されます。 あるいは、他のゲージ関数の場合に無名オブジェクトを使用する代わりに使用されます。

範囲ウィジェット
オブジェクトの変数
数値 low この範囲の下限すなわち最小の値。
数値 high この範囲の上限すなわち最大の値。
ストリング hover ゲージがマウスオーバーされたときに吹き出しヘルプに入れるテキスト。
ストリング|オブジェクト color この範囲の色。 ibm_gauge.widget.Gradient オブジェクトの場合もあります。
数値 size AnalogGauge などの円形ゲージの場合、この値は弧のサイズを示します。

グラデーション・ウィジェット
オブジェクトの変数
ストリング type グラデーションのタイプ。 使用可能なタイプについては、dojox.gfx.* を参照してください。
数値 x1 最初の色が最も多く使用される位置の x 座標。
数値 x2 2 番目の色が最も多く使用される位置の x 座標。
数値 y1 最初の色が最も多く使用される位置の y 座標。
数値 y2 2 番目の色が最も多く使用される位置の y 座標。
配列 colors このグラデーションに使用する 2 つの色。 これらの色は一般に、 ibm_gauge.widget.GradientColor オブジェクト、 またはそれに相当するプロパティーを持つ無名オブジェクトです。

オブジェクトの関数
オブジェクト getFillObject()
このウィジェットを無名の塗りつぶしオブジェクトとして取得します。

関数の詳細
getFillObject

グラデーション色ウィジェット
オブジェクトの変数
数値 offset この色のオフセット (0 または 1)。
ストリング color 使用する色。 一般に、CSS スタイルの色 (白または #000000 など) です。

オブジェクトの関数
オブジェクト getColorObject()
このウィジェットを無名の色オブジェクトとして取得します。

関数の詳細
getcolorObject

標識ウィジェット
オブジェクトの変数
数値 value この標識が示すゲージ上の値。
ストリング type 標識のタイプ。 可能な例としては、linearrow、および bar があります。 可能な値は、ゲージのタイプによって異なります。
ストリング color この標識の色。 通常は CSS スタイルの色です。
ストリング label この標識のラベル。
数値 length 標識の長さ。
数値 width 標識の幅または厚さ。
数値 offset 標識のオフセット。
ストリング hover この標識がマウスオーバーされたときに吹き出しヘルプに入力するテキスト。
ストリング|関数 onDragMove 標識がドラッグ・アクションによって移動したときに呼び出す関数。 この値は、関数名にすることも、関数そのものにすることもできます。

Analog gauge widget

アナログ・ゲージ・ウィジェットは、数値を示すための、グラフィカルな円形ゲージを提供します。 これは、速度計や圧力計に非常によく似ています。 このゲージには、開始と終了の角度値があり、完全な円形、半円形および弧を含め、 円をベースにした形のゲージがいくつでも提供されます。 アナログ・ゲージは、_Gauge スーパークラスを拡張したもので、 そのすべての変数、プロパティー、および関数を継承します。

オブジェクトの変数
数値 gaugeWidth 同じ名前の _Gauge プロパティーをオーバーライドします。 この変数は、ゲージの幅を示し、デフォルトを 300 ピクセルに設定します。
数値 gaugeHeight 同じ名前の _Gauge プロパティーをオーバーライドします。 この変数は、ゲージの高さを示し、デフォルトを 200 ピクセルに設定します。
数値 cx 指定された面領域内のゲージの中心の x 座標。 デフォルトは gaugeWidth/2 です。
数値 cy 指定された面領域内のゲージの中心の y 座標。 デフォルトは gaugeHeight/2 です。
数値 radius ゲージの半径。 デフォルトは、cx-25 から cy-25 の間の低い方の値です。
数値 startAngle ゲージが開始する角度を度数で示します。 デフォルトは -90 です。
数値 endAngle ゲージが終了する角度を度数で示します。 デフォルトは -90 です。

オブジェクトの関数
void addIndicator(Object indicator)
このゲージに所定の標識を追加します。
数値 getAngle(Number value)
ゲージに数値が指定された場合に、その値に対応する角度を取得します。
数値 getValueForAngle(Number angle)
角度が指定された場合に、その角度に対応する値を取得します。
数値 getRadians(Number angle)
度数からラジアンに変換します。
数値 getDegrees(Number radians)
ラジアンから度数に変換します。
void draw()
ゲージを描画、または再描画します。
void drawRange(Object range)
このゲージ上に所定の範囲を描きます。
void drawIndicator(Object indicator)
このゲージ上に所定の標識を描きます。
void moveIndicator(Object indicator)
このゲージ上で所定の標識を移動します。
オブジェクト getRangeUnderMouse(Object event)
マウス・カーソルが現在移動している範囲を判別します。

関数の詳細
addIndicator

getAngle

getValueForAngle

getRadians

getDegrees

draw

drawRange

drawIndicator

moveIndicator

getRangeUnderMouse

棒グラフ・ウィジェット

棒グラフ・ウィジェットは、数値データのグラフィカル表示を、単一列の水平棒グラフの形式で提供します。 棒グラフには、同じ列上の水平バー、ターゲット標識、およびティック・マークをいくつでも表示できます。 棒グラフ・ウィジェットは、_Gauge スーパークラスを拡張し、そのすべての変数、プロパティー、および関数を継承します。

オブジェクトの変数
数値 gaugeWidth 同じ名前の _Gauge プロパティーをオーバーライドします。 この変数は、ゲージの幅を示し、デフォルトを 250 ピクセルに設定します。
数値 gaugeHeight 同じ名前の _Gauge のプロパティーをオーバーライドします。 この変数は、ゲージの高さを示し、デフォルトを 35 ピクセルに設定します。
数値 dataX データ域が開始する位置の x 座標 (ピクセル単位)。 デフォルトは 5 です。
数値 dataY データ域が開始する位置の y 座標 (ピクセル単位)。 デフォルトは 5 です。
数値 dataWidth データ域の幅 (ピクセル単位)。 デフォルトは gaugeWidth-10 です。
数値 dataHeight データ域の高さ (ピクセル単位)。 デフォルトは gaugeHeight-10 です。

オブジェクトの関数
void addIndicator(Object indicator)
この棒グラフに所定の標識を追加します。
数値 getPosition(Number value)
所定の値を表す座標位置を取得します。
数値 getValueForPosition(Number position)
所定の座標位置の値を取得します。
void draw()
棒グラフを描画または再描画します。
void drawRange(Object range)
この棒グラフ上に所定の範囲を描きます。
void drawIndicator(Object indicator)
この棒グラフ上に所定の標識を描きます。
void moveIndicator(Object indicator)
この棒グラフ上で所定の標識を移動します。
void resizeIndicator(Object indicator)
この棒グラフ上で所定の標識をサイズ変更します。
オブジェクト getRangeUnderMouse(Object event)
マウス・カーソルが移動する範囲を判別します。

関数の詳細
addIndicator

getPosition

getValueForPosition

draw

drawRange

drawIndicator

moveIndicator

resizeIndicator

getRangeUnderMouse