このトピックでは例を使用して、igLinearGauge
™ コントロールのスケールをカスタマイズする方法を説明します。説明には、コントロール内のスケールの配置、スケールの目盛およびラベルの構成が含まれます。(デフォルト設定については、igLinearGauge の概要のトピックを参照してください。)
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igLinearGauge の概要: このトピックは、主要機能、最小要件およびユーザー機能性など、igLinearGauge
コントロールの概念的な情報を提供します。
igLinearGauge の追加: このトピック グループでは、igLinearGauge
™ コントロールを HTML ページと ASP.NET MVC アプリケーションに追加する方法を示します。
このトピックは、以下のセクションで構成されます。
igLinearGauge
コントロールのスケールは、目盛とラベル (番号) で形成された論理エンティティです。目盛のサイズおよび位置はグラフ領域に対して構成され、番号ラベルの位置はコントロールの内側の端 (水平方向で下端) に対して構成されます。
igLinearGauge
コントロールの目盛は、グラフに沿ってメジャーの等間隔で表示されます。目盛は、主目盛および補助目盛の 2 種類がサポートされています。どちらの目盛も、グラフ領域に対して測定される範囲関連の各プロパティの値を調整することにより、スケールに沿って配置できます。目盛の正確な数、位置、外観、および表示の頻度はプロパティ設定によりカスタマイズできます。
ラベルについては、位置、テキスト、書式などのさまざまな要素が構成できます。
以下の表で、igLinearGauge
コントロールのスケールで構成できる要素を簡単に説明し、構成に使用するプロパティにマップします。
構成可能な要素 | プロパティ | デフォルト値 | |||
---|---|---|---|---|---|
位置 | scaleStartExtent | 0.05 | |||
scaleEndExtent | 0.95 | ||||
範囲と値 | 最大値 | minimumValue | 0 | ||
最小値 | maximumValue | 100 | |||
目盛 | 主目盛 | スケール内の位置、スペースおよび長さ | interval | 設定されていません | |
ticksPostInitial | 0 | ||||
ticksPreTerminal | 0 | ||||
tickStartExtent | 0.02 | ||||
tickEndExtent | 0.2 | ||||
ルック アンド フィール | 色 | tickBrush | デフォルトのテーマで定義済み | ||
幅 | tickStrokeThickness | 2.0 | |||
補助目盛 | 隣接する 2 つの主目盛間の数値 | minorTickCount | 3.0 | ||
位置 | minorTickStartExtent | 0.06 | |||
minorTickEndExtent | 0.2 | ||||
ルック アンド フィール | 色 | minorTickBrush | デフォルトのテーマで定義済み | ||
幅 | minorTickStrokeThickness | 1.0 | |||
ラベル | 位置とスペース | labelExtent | 0 | ||
labelInterval | 設定されていません | ||||
labelsPostInitial | 0 | ||||
labelsPreTerminal | 0 | ||||
数値書式 | labelFormat | 設定されていません | |||
ルック アンド フィール | 色 | fontBrush | デフォルトのテーマで定義済み |
スケールに沿ったディメンションの igLinearGauge コントロール内でのスケールのサイズおよび位置は、グラフ領域に対して決定されます。これは一組のプロパティ (scaleStartExtent と scaleEndExtent) により実行されます。
グラフ領域の他方 (スケール全域) のディメンションでのスケールの配置自体を構成できませんが、スケールを構成するすべての要素で個別に構成されます。
注: 番号ラベルの配置を制御する
LabelExtent
プロパティの値は、コントロールの方向が水平の場合はコントロールの高さに対して測定され、それ以外の場合はコントロールの幅に対して測定されます。詳細は、向きと方向の構成 (igLinearGauge) を参照してください。)
以下の表では、任意の動作と各プロパティ設定のマップを示します。構成可能な要素の実例については、例を参照してください。
構成の目的: | 使用するプロパティ: | 設定の選択肢: | ||
---|---|---|---|---|
要素 | 詳細 | |||
スケールに沿ったディメンション - サイズと位置 | 開始位置 | 水平方向でグラフ領域の左端からのスケールの開始位置、または垂直方向でグラフ領域の下端からのスケールの開始位置。 (スケールの方向が反転した場合、水平方向で右端、垂直方向で上端となります。詳細は、向きと方向の構成 (igLinearGauge) を参照してください。) | scaleStartExtent | 方向に応じた、コントロールの高さと幅の相対部分として望ましい値。小数で指定 (例: 0.2) |
終了位置 | 水平方向でコントロールの左端に対するグラフ領域の左端からのスケールの終了位置、または垂直方向ではグラフ領域の下端からのスケールの終了位置。 (スケールの方向が反転した場合、水平方向で右端、垂直方向で上端となります。詳細は、向きと方向の構成 (igLinearGauge) を参照してください。) | scaleEndExtent | 方向に応じた、コントロールの高さと幅の相対部分として望ましい値。小数で指定 (例: 0.8) |
以下のスクリーンショットは、以下の設定の結果、igLinearGauge
の外観がどのようになるか示しています。
プロパティ | 値 |
---|---|
scaleStartExtent | 0.2 |
scaleEndExtent | 0.9 |
以下のコードはこの例を実装します。
JavaScript の場合:
$('#igLinearGauge').igLinearGauge({
width: 300,
height: 70,
scaleStartExtent: 0.2,
scaleEndExtent: 0.9});
スケールの値は、その値の範囲 (つまり最小値と最大値) を指定することで定義します。これは、minimumValue と minimumValue プロパティで定義されます。
最小値と最大値を設定するとスケール内のすべての値が定義され、すべての値は最小値と最大値の間に均等に分布されます。ただし、表示されるにはスケールに配置された番号ラベルがある値のみです。(スケールの値は番号ラベルによってのみ表示できます。ラベルは、スケール上のラベルの位置に基づき各値を表示します。つまり、ラベルの値はスケールに沿ったラベルの配置よって構成され、明示的には設定されません。)最小値および最大値の位置にラベルは必要ではありません。これは、最小値および最大値がスケール上に表示されず、スケールが以下のように表示される可能性があることを意味します。
スケールの範囲を定義すると、比較範囲および針などの他の値ベースの視覚要素もスケール上に配置できます。前述の要素は値ベースであるため、スケールの範囲が変化 (最小値または最大値の変化、あるいはその両方の変化) すると、これらの視覚要素は、スケール上の位置が保持されたスケール値に応じて再配置されます。(この結果の実例は、範囲設定のサンプルを参照してください。)
以下の表では、任意の動作と各プロパティ設定のマップを示します。 構成可能な要素の実例については、例を参照してください。
構成の目的: | 使用するプロパティ: | 設定の選択肢: | |
---|---|---|---|
要素 | 詳細 | ||
スケールの最小値 | スケールが開始する値。 | minimumValue | スケールのメジャーにおける任意の値 |
スケールの最大値 | スケールが終了する値。 | maximumValue | スケールのメジャーにおける任意の値 |
以下のスクリーンショットは、以下の設定の結果、igLinearGauge
の外観がどのようになるか示しています。
プロパティ | 値 |
---|---|
minimumValue | 60 |
maximumValue | 70 |
以下のコードはこの例を実装します。
JavaScript の場合:
$('#igLinearGauge').igLinearGauge({
width: 300,
height: 70,
minimumValue: 60,
maximumValue: 70});
igLinearGauge
コントロールの主目盛は、位置および表示する間隔に関してカスタマイズできます。主目盛を形成する線分の高さ、幅、および色も構成が可能です。
主目盛は、開始点および終了点 (グラフ領域の端からの最初と最後の目盛位置)、および表示する間隔 (各目盛間の距離) で定義します。(ticksPostInitial、ticksPreTerminal、および interval プロパティで定義されます。)この方法で主目盛の開始点および終了点を定義すると、基本的にスケールの位置および長さを定義することになります。
スケール全域のディメンションでは、主目盛を形成する線分の長さと位置はグラフ領域の端に対して構成されます。(tickStartExtent プロパティおよび tickEndExtent プロパティによって構成されます。)
以下の表では、任意の動作と各プロパティ設定のマップを示します。構成可能な要素の実例については、例を参照してください。
構成の目的: | 使用するプロパティ: | 設定の選択肢: | ||
---|---|---|---|---|
要素 | 詳細 | |||
スケールに沿った位置、数、およびスペース | 開始点 | スケールの開始位置に対して主目盛が始まる距離 | ticksPostInitial | スケールの開始位置からスケールのメジャーの任意の距離 |
終了点 | スケールの終了位置に対して主目盛が終了する距離 | ticksPreTerminal | スケールの終了位置からスケールのメジャーの任意の距離 | |
間隔 | 主目盛を配置する間隔 (間隔は、スケールのメジャーにおける隣接する 2 つの主目盛間の距離です。) | interval | スケールのメジャーにおける任意の値 | |
スケール全域での位置およびセグメントの長さ | 開始点 | 主目盛を形成する線分の開始点。 (開始点は、水平方向でグラフ領域の下部に対して定義され、垂直方向でグラフ領域の左端に対して定義されます。) 負の値もサポートされ、グラフ領域の下方 / 左側の位置に表示します。 | tickStartExtent | 方向に応じたグラフ領域の高さと幅の相対部分として、スケールのメジャーの望ましい値。小数で指定 (例: 0.2) |
終了点 | 水平方向でグラフ領域の下部から主目盛を形成する線分の終了点、または垂直方向でグラフ領域の左の境界線からの主目盛の線分の終了点。 負の値もサポートされ、グラフ領域の下方 / 左側の位置に表示します。 (開始点と終了点間の差が目盛の線分の長さになります。) | tickEndExtent | 方向に応じた、グラフ領域の高さと幅の相対部分として必要な値。小数で指定 (例: 0.8) | |
ルック アンド フィール | 幅 | 主目盛の線分の幅 | tickStrokeThickness | 任意の値 (ピクセル) |
色 | 主目盛の色 | tickBrush | 任意の色 |
以下のスクリーンショットは、以下の設定の結果、igLinearGauge
の外観がどのようになるか示しています。
プロパティ | 値 |
---|---|
interval | 30 |
tickBrush | lime |
tickEndExtent | 0.9 |
ticksPostInitial | 30 |
ticksPreTerminal | 10 |
tickStartExtent | 0.5 |
tickStrokeThickness | 3 |
以下のコードはこの例を実装します。
JavaScript の場合:
('#igLinearGauge').igLinearGauge({
width: 300,
height: 70,
interval: 30,
tickBrush: 'lime',
tickStartExtent: 0.5,
tickEndExtent: 0.9,
ticksPostInitial: 30,
ticksPreTerminal: 10,
tickStrokeThickness: 3 });
igLinearGauge
コントロールの補助目盛は、明示的に無効にできます。あるいは、2 つの主目盛間の番号、位置、サイズ、および色をカスタマイズできます。
補助目盛は、数 (隣接する 2 つの主目盛間の補助目盛の数) として定義されます。(数は minorTickCount プロパティにより定義されます。このプロパティを 0 に設定すると、補助目盛が無効 (非表示) になります。)数が設定されると、指定された数の補助目盛はスケール全体で、各隣接した 2 つの主目盛間に均等に配置されます。
スケール全域のディメンションでは、補助目盛の長さと位置はグラフ領域の端に対して構成されます。
以下の表では、任意の動作と各プロパティ設定のマップを示します。構成可能な要素の実例については、例を参照してください。
構成の目的: | 使用するプロパティ: | 設定の選択肢: | |||
---|---|---|---|---|---|
要素 | 詳細 | ||||
番号とスペース | 隣接する 2 つの主目盛間の補助目盛の数 | minorTickCount | 任意の数。0 を設定すると補助目盛を非表示。 | ||
線分 | 長さと位置 | 開始点 | 補助目盛を形成する線分の開始点。 (開始点は、水平方向でグラフ領域の下部に対して定義され、垂直方向でグラフ領域の左端に対して定義されます。) 負の値もサポートされ、グラフ領域の下方 / 左側の位置に表示します。 | minorTickStartExtent | 方向に応じた、コントロールの高さと幅の相対部分として望ましい値。小数で指定 (例: 0.2) |
終了点 | 水平方向ではグラフ領域の下部から補助目盛を形成する線分の終了点、または垂直方向でグラフ領域の左の境界線からの補助目盛の線分の終了点。 負の値もサポートされ、グラフ領域の下方 / 左側の位置に表示します。 (開始点と終了点間の差が目盛の線分の長さになります。) | minorTickEndExtent | 方向に応じた、コントロールの高さと幅の相対部分として望ましい値。小数で指定 (例: 0.25) | ||
ルック アンド フィール | 幅 | 補助目盛の線分の幅 | minorTickStrokeThickness | 任意の値 (ピクセル) | |
色 | 補助目盛の色 | minorTickBrush | 任意の色 |
以下のスクリーンショットは、以下の設定の結果、igLinearGauge
の外観がどのようになるか示しています。
result of the following settings:
プロパティ | 値 |
---|---|
minorTickBrush | Purple |
minorTickCount | 4 |
minorTickEndExtent | 0.1 |
minorTickStartExtent | 0.05 |
minorTickStrokeThickness | 2 |
interval | 20 |
以下のコードはこの例を実装します。
JavaScript の場合:
('#igLinearGauge').igLinearGauge({
width: 300,
height: 70,
minorTickCount: 4,
minorTickBrush: 'purple',
minorTickStartExtent: 0.05,
minorTickEndExtent: 0.1,
minorTickStrokeThickness: 2,
interval: 20});
デフォルトで、スケールのメジャーを示すラベルは有効になっています。ラベルは以下の要因で定義します。
各ラベルが表示する値は、スケール上の位置によって表される値で定義されます。(このためにはスケールの値の範囲の構成が必要です。)文字列の書式はラベルに適用できるため、外観を追加でカスタマイズできます。デフォルトで、数値ラベルは各主目盛に対して表示され、ラベルはスケールの方向 (水平 / 垂直) に応じてスケールの下位 / 左側に配置されます。
ラベルと主目盛をカスタマイズする場合、相互の位置関係を確認する必要があります。位置を合わせるには、目盛の間隔 (interval プロパティ) とラベルの間隔 (labelInterval
プロパティ) を同じ値に設定します。(デフォルトで、labelInterval
プロパティは設定されていませんが、interval に設定された値を使用するため、正しく位置合わせされます。)
igLinearGauge
のラベルは、対応するイベントを処理する場合に追加でフォーマットし、位置合わせすることができます。
以下の表では、任意の動作と各イベントのマップを示します。
目的: | このイベントの処理: |
---|---|
ラベルのフォーマット | formatLabel |
ラベルの位置合わせ | alignLabel |
以下の表では、任意の動作と各プロパティ設定のマップを示します。構成可能な要素の実例については、例 - 水平方向を参照してください。
構成の目的: | 使用するプロパティ: | 設定の選択肢: | ||
---|---|---|---|---|
要素 | 詳細 | |||
ラベル行 | 位置 | 垂直 / 水平方向に応じた、コントロールの下部 / 左端に対するラベル行の配置。 | labelExtent | 垂直 / 水平方向に応じた、コントロールの高さと幅の相対部分として望ましい値。小数で指定 (例: 0.8)。 |
番号とスペース | 開始点 | スケールに沿った最初のラベルのスケールのメジャーにおける位置 | labelsPostInitial | スケールの最初のラベルを表示するスケールのメジャーにおける値 |
終了点 | スケールに沿った最後のラベルのスケールのメジャーにおける位置 | labelsPreTerminal | スケールの最後のラベルを表示するスケールのメジャーにおける値 | |
間隔 | ラベルを配置する間隔 (間隔は、スケールのメジャーにおける隣接する 2 つのラベルの距離です。) | labelInterval | スケールのメジャーにおける任意の値 | |
ルック アンド フィール | フォント色 | ラベルのフォント色 | fontBrush | 任意の色 |
以下のスクリーンショットは、以下の設定の結果、デフォルトの水平方向で igLinearGauge
の外観がどのようになるか示しています。
プロパティ | 値 |
---|---|
labelExtent | 0.75 |
labelInterval | 30 |
labelsPostInitial | 20 |
labelsPreTerminal | 20 |
fontBrush | Green |
以下のコードはこの例を実装します。
JavaScript の場合:
('#igLinearGauge').igLinearGauge({
width: 300,
height: 70,
labelExtent: 0.75,
labelInterval: 30,
labelsPostInitial: 20,
labelsPreTerminal: 20,
fontBrush: 'green'
});
以下のスクリーンショットは、以下のプロパティ設定の結果、(例 - 水平方向の場合と同様に) 垂直方向で igLinearGauge
の外観がどのようになるか示しています。
プロパティ | 値 |
---|---|
orientation | 垂直方向 |
labelExtent | 0.75 |
labelInterval | 30 |
labelsPostInitial | 20 |
labelsPreTerminal | 20 |
fontBrush | Green |
以下のコードはこの例を実装します。
JavaScript の場合:
('#igLinearGauge').igLinearGauge({
height: 300,
width: 70,
orientation: 'vertical',
labelExtent: 0.75,
labelInterval: 30,
labelsPostInitial: 20,
labelsPreTerminal: 20,
fontBrush: 'green'
});
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
向きと方向の構成 (igLinearGauge): このトピックは、垂直スケールと反転したスケール方向の両方またはいずれか一方により igLinearGauge コントロールを構成する方法を説明します。
針の構成 (igLinearGauge): このトピックではコード例を使用して、igLinearGauge コントロールの針を構成する方法を説明します。説明には、針が示す値、幅、位置、および書式設定が含まれます。
比較範囲の構成 (igLinearGauge): このトピックではコード例を使用して、igLinearGauge コントロールの範囲を構成する方法を説明します。説明には、範囲の数、位置、長さ、幅、および書式設定が含まれます。
背景の構成 (igLinearGauge): このトピックではコード例を使用して、リニア ゲージの背景を構成する方法を説明します。説明には、背景のサイズ、位置、色、および境界線の設定が含まれます。
ツールチップの構成 (igLinearGauge): このトピックではコード例を使用して、igLinearGauge
コントロールのツールチップを有効にする方法および表示する遅延時間を設定する方法を説明します。
このトピックについては、以下のサンプルも参照してください。
igLinearGauge
コントロールのサポートされるスケール構成を紹介します。オンラインで表示: GitHub