このオブジェクトは、アナログ・ゲージ・ウィジェットと棒グラフ・ウィジェットのスーパークラスです。 このオブジェクトは、これら 2 つのウィジェット間で共通する機能をすべて提供します。 この中には、基本面の作図、ほとんどのマウス・イベントの処理などが含まれます。 以下の共通する変数と関数が使用可能です。
オブジェクトの変数 | ||
---|---|---|
数値 | gaugeWidth | ページ上に作成する面の幅。 ピクセルで表示されます。 |
数値 | gaugeHeight | ページ上に作成する面の高さ。 ピクセルで表示されます。 |
ストリング|オブジェクト | gaugeBackground | ゲージの背景に適用する色。 一般には、CSS スタイルの色 (#e0e0e0 など) です。 この色を使用して、オブジェクトを塗りつぶします。 例を参照してください。 |
数値 | gaugeMin | ゲージに表示される最小値。 |
数値 | gaugeMax | ゲージに表示される最大値。 |
ストリング | image | ゲージの背景として使用する URL。 |
数値 | imageX | イメージを配置する x 座標。 デフォルト値は 0 で、左下隅の位置を示します。 |
数値 | imageY | イメージを配置する y 座標。 デフォルト値は 0 で、左下隅の位置を示します。 |
数値 | imageWidth | 前述のイメージの幅。 イメージを使用する場合は、このイメージの値を表示するように指定する必要があります。 |
数値 | imageHeight | 前述のイメージの高さ。 イメージを使用する場合は、このイメージの値を表示するように指定する必要があります。 |
ブール | imageOverlay | 前述のイメージが、背景ではなくオーバーレイであるかどうか。 |
数値 | useRangeStyles | CSS スタイルを使用して範囲の色を示すかどうか。 |
ブール | hideValues | テキスト・ボックスをゲージの下に隠し、標識の値を表示するかどうか。 |
この変数は、マークアップで宣言的に設定する場合は、ストリングでしか設定できません。 これは通常、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;
この変数のデフォルト値は 0 で、組み込みの範囲色が使用されることを示します。 しかし、0 より大きい値を指定した場合は、その番号の CSS クラスである ibmGaugeRange1、 ibmGaugeRange2 などが範囲のスタイルに使用されます。 このフィーチャーは、Internet Explorer では機能しません。 CSS クラスのプロパティーを以下の例に示します。
.ibmGaugeRange1 { fill: #808080 ; stroke: #808080 ; }ご覧のように、これらは、HTML スタイルではなく Scalable Vector Graphics (SVG) スタイルです。 背景色などの属性は、無効です。
デフォルトでは、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) マウス・サポート。 |
関数の詳細 |
---|
var gauge = new ibm_gauge.widget.AnalogGauge(); gauge.addRange({low:10, high:20, hover:'10 - 20'});
var gauge = new ibm_gauge.widget.AnalogGauge({}); gauge.addRanges([{low:10, high:20, hover:'10 - 20'},{low:20, high:30, hover:'20 - 30'}]);
var gauge = new ibm_gauge.widget.AnalogGauge({}); gauge.drawText("Sample text", 100, 50, 'right');
var gauge = new ibm_gauge.widget.AnalogGauge({}); gauge.drawText("Sample text", 100, 50, 'right'); gauge.removeText("Sample text");
var gauge = new ibm_gauge.widget.AnalogGauge({}); gauge.updateTooltip("Text to put in tooltip!");
以下のウィジェット (範囲、グラデーション、グラデーション色、および標識) は、主にゲージをマークアップで宣言的に作成するために使用されます。 あるいは、他のゲージ関数の場合に無名オブジェクトを使用する代わりに使用されます。
オブジェクトの変数 | ||
---|---|---|
数値 | 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() このウィジェットを無名の塗りつぶしオブジェクトとして取得します。 |
関数の詳細 |
---|
オブジェクトの変数 | ||
---|---|---|
数値 | offset | この色のオフセット (0 または 1)。 |
ストリング | color | 使用する色。 一般に、CSS スタイルの色 (白または #000000 など) です。 |
オブジェクトの関数 | |
---|---|
オブジェクト | getColorObject() このウィジェットを無名の色オブジェクトとして取得します。 |
関数の詳細 |
---|
オブジェクトの変数 | ||
---|---|---|
数値 | value | この標識が示すゲージ上の値。 |
ストリング | type | 標識のタイプ。 可能な例としては、line、arrow、および bar があります。 可能な値は、ゲージのタイプによって異なります。 |
ストリング | color | この標識の色。 通常は CSS スタイルの色です。 |
ストリング | label | この標識のラベル。 |
数値 | length | 標識の長さ。 |
数値 | width | 標識の幅または厚さ。 |
数値 | offset | 標識のオフセット。 |
ストリング | hover | この標識がマウスオーバーされたときに吹き出しヘルプに入力するテキスト。 |
ストリング|関数 | onDragMove | 標識がドラッグ・アクションによって移動したときに呼び出す関数。 この値は、関数名にすることも、関数そのものにすることもできます。 |
アナログ・ゲージ・ウィジェットは、数値を示すための、グラフィカルな円形ゲージを提供します。 これは、速度計や圧力計に非常によく似ています。 このゲージには、開始と終了の角度値があり、完全な円形、半円形および弧を含め、 円をベースにした形のゲージがいくつでも提供されます。 アナログ・ゲージは、_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) マウス・カーソルが現在移動している範囲を判別します。 |
関数の詳細 |
---|
棒グラフ・ウィジェットは、数値データのグラフィカル表示を、単一列の水平棒グラフの形式で提供します。 棒グラフには、同じ列上の水平バー、ターゲット標識、およびティック・マークをいくつでも表示できます。 棒グラフ・ウィジェットは、_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) マウス・カーソルが移動する範囲を判別します。 |
関数の詳細 |
---|