スケールの構成 (igBulletGraph)

トピックの概要

目的

このトピックではコード例を使用して、igBulletGraph™ コントロールのスケールをカスタマイズする方法を説明します。説明には、コントロール内のスケールの配置、スケールの目盛およびラベルの構成が含まれます。(デフォルトの設定については、igBulletGraph の概要のトピックを参照してください。)

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

• igBulletGraph の概要: このトピックは、主要機能、最小要件およびユーザー機能性など、igBulletGraph コントロールの概念的な情報を提供します。

• igBulletGraph の追加: このトピック グループは、igBulletGraph コントロールを HTML ページと ASP.NET MVC アプリケーションに追加する方法を説明します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

• 概要
  • スケール構成の概要
  • スケール構成の概要表
• スケールサイズと位置の構成
  • 概要
  • プロパティ設定
  • 例
• スケールの範囲の構成
  • 概要
  • プロパティ設定
  • 例
• スケールの主目盛の構成
  • 概要
  • スケールに沿った位置、数、およびスペースの構成
  • スケール全域での位置およびセグメントの長さの構成
  • プロパティ設定
  • 例
• スケールの補助目盛の構成
  • 概要
  • スケールに沿った位置、数、およびスペースの構成
  • スケール全域での位置およびセグメントの長さの構成
  • プロパティ設定
  • 例
• スケールのラベリングの構成
  • 概要
  • イベント処理
  • プロパティ設定
  • 例 - 水平方向
  • 例 - 垂直方向
• 関連コンテンツ
  • トピック
  • サンプル

概要

スケール構成の概要

igBulletGraph コントロールのスケールは、目盛とラベル (番号) で形成された論理エンティティです。目盛のサイズおよび位置はグラフ領域に対して構成され、番号ラベルの位置はコントロールの内側の端 (水平方向で下端) に対して構成されます。

igBulletGraph コントロールの目盛は、グラフに沿ってメジャーの等間隔で表示されます。目盛は、主目盛および補助目盛の 2 種類がサポートされています。どちらの目盛も、グラフ領域に対して測定される範囲関連の各プロパティの値を調整することにより、スケールに沿って配置できます。目盛の正確な数、位置、外観、および表示の頻度はプロパティ設定によりカスタマイズできます。

ラベルについては、位置、テキスト、書式などのさまざまな要素が構成できます。

スケール構成の概要表

以下の表で、igBulletGraph コントロールのスケールで構成できる要素について簡単に説明し、構成に使用するプロパティにマップします。

スケールサイズと位置の構成

概要

スケールに沿ったディメンションの igBulletGraph コントロール内のスケールのサイズおよび位置は、グラフ領域に対して決定されます。これは一組のプロパティ (scaleStartExtent と scaleEndExtent) により実行されます。

グラフ領域の他方 (スケール全域) のディメンションでのスケールの配置自体を構成できませんが、スケールを構成するすべての要素で個別に構成されます。

注: 番号ラベルの配置を制御する LabelExtent プロパティの値は、コントロールの方向が水平の場合はコントロールの高さに対して測定され、それ以外の場合はコントロールの幅に対して測定されます。(詳細は、向きと方向の構成 (igBulletGraph) を参照してください。)

プロパティ設定

以下の表では、任意の動作と各プロパティ設定のマップを示します。構成可能な要素の実例については、例を参照してください。

例

以下のスクリーンショットは、以下の設定の結果、igBulletGraph の外観がどのようになるか示しています。

以下のコードはこの例を実装します。

JavaScript の場合:

$('#igBulletGraph').igBulletGraph({
    width: 300,
    height: 70,
    scaleStartExtent: 0.2,
    scaleEndExtent: 0.9});

スケールの範囲の構成

概要

スケールの値は、その値の範囲 (つまり最小値と最大値) を指定することで定義します。minimumValue プロパティおよび scaleEndExtent プロパティで定義されます。

最小値と最大値を設定するとスケール内のすべての値が定義され、すべての値は最小値と最大値の間に均等に分布されます。ただし、表示されるにはスケールに配置された番号ラベルがある値のみです。(スケールの値は番号ラベルによってのみ表示できます。ラベルは、スケール上のラベルの位置に基づき各値を表示します。つまり、ラベルの値はスケールに沿ったラベルの配置よって構成され、明示的には設定されません。)最小値および最大値の位置にラベルは必要ではありません。これは、最小値および最大値がスケール上に表示されず、スケールが以下のように表示される可能性があることを意味します。

スケールの範囲を定義すると、パフォーマンス バー、比較範囲、比較マーカーなどの他の値ベースの視覚要素もスケール上に配置できます。前述の要素は値ベースであるため、スケールの範囲が変化 (最小値または最大値の変化、あるいはその両方の変化) すると、これらの視覚要素は、スケール上の位置が保持されたスケール値に応じて再配置されます。(この結果の実例は、範囲設定のサンプルを参照してください。)

プロパティ設定

以下の表では、任意の動作と各プロパティ設定のマップを示します。構成可能な要素の実例については、例を参照してください。

例

以下のスクリーンショットは、以下の設定の結果、igBulletGraph の外観がどのようになるか示しています。

以下のコードはこの例を実装します。

JavaScript の場合:

$('#igBulletGraph').igBulletGraph({
    width: 300,
    height: 70,
    minimumValue: 60,
    maximumValue: 70});

スケールの主目盛の構成

概要

igBulletGraph コントロールの主目盛は、位置および表示する間隔でカスタマイズできます。主目盛を形成する線分の高さ、幅、および色も構成が可能です。

スケールに沿った位置、数、およびスペースの構成

主目盛は、開始点および終了点 (グラフ領域の端からの最初と最後の目盛位置)、および表示する間隔 (各目盛間の距離) で定義します。(ticksPostInitial、ticksPreTerminal、および interval プロパティで定義されます。)この方法で主目盛の開始点および終了点を定義すると、基本的にスケールの位置および長さを定義することになります。

スケール全域での位置およびセグメントの長さの構成

スケール全域のディメンションでは、主目盛を形成する線分の長さと位置はグラフ領域の端に対して構成されます。(tickStartExtent プロパティおよび tickEndExtent プロパティによって構成されます。)

プロパティ設定

以下の表では、任意の動作と各プロパティ設定のマップを示します。構成可能な要素の実例については、例を参照してください。

例

以下のスクリーンショットは、以下の設定の結果 igBulletGraph の外観がどのようになるか示しています。

以下のコードはこの例を実装します。

JavaScript の場合:

('#igBulletGraph').igBulletGraph({
    width: 300,
    height: 70,
    interval: 30,
    tickBrush: 'lime',
    tickStartExtent: 0.5,
    tickEndExtent: 0.9,
    ticksPostInitial: 30,
    ticksPreTerminal: 10,
    tickStrokeThickness: 3 });

スケールの補助目盛の構成

概要

igBulletGraph コントロールの補助目盛は、明示的に無効にできます。あるいは、2 つの主目盛間の数、配置、サイズ、および色をカスタマイズできます。

スケールに沿った位置、数、およびスペースの構成

補助目盛は、数 (隣接する 2 つの主目盛間の補助目盛の数) として定義されます。(数は minorTickCount プロパティにより定義されます。このプロパティを 0 に設定すると、補助目盛が無効 (非表示) になります。)数が設定されると、指定された数の補助目盛はスケール全体で、各隣接した 2 つの主目盛間に均等に配置されます。

スケール全域での位置およびセグメントの長さの構成

スケール全域のディメンションでは、補助目盛の長さと位置はグラフ領域の端に対して構成されます。

プロパティ設定

以下の表では、任意の動作と各プロパティ設定のマップを示します。構成可能な要素の実例については、例を参照してください。

例

以下のスクリーンショットは、以下の設定の結果 igBulletGraph の外観がどのようになるか示しています。

以下のコードはこの例を実装します。

JavaScript の場合:

('#igBulletGraph').igBulletGraph({
    width: 300,
    height: 70,
    minorTickCount: 4,
    minorTickBrush: 'purple',
    minorTickStartExtent: 0.05,
    minorTickEndExtent: 0.1,
    minorTickStrokeThickness: 2,
    interval: 20});

スケールのラベリングの構成

概要

デフォルトで、スケールのメジャーを示すラベルは有効になっています。ラベルは以下の要因で定義します。

• 開始点および終了点 - スケールの両端での最初と最後のラベルの位置
• ラベル行の幅 - 方向 (垂直 / 水平) に応じたコントロールの高さと幅に対する幅。この幅は、適用されたスタイル テンプレートのフォント設定のみで間接的に制御できます。
• 発生する間隔 (相互距離)。(labelsPostInitial、labelsPreTerminal、および labelInterval プロパティにより定義されます。)
• スケール全域のディメンションでのラベル行の位置 - デフォルトで、水平に対してコントロールの下部、垂直に対して左側に設定されています。水平のスケール方向で全行は垂直に移動し、垂直のスケール方向で水平に移動することができます。(labelExtent プロパティにより定義されます。)

各ラベルが表示する値は、スケール上の位置によって表される値で定義されます。(このためにはスケールの値の範囲の構成が必要です。)文字列の書式はラベルに適用できるため、外観を追加でカスタマイズできます。デフォルトで、数値ラベルは各主目盛に対して表示され、ラベルはスケールの方向 (水平 / 垂直) に応じてスケールの下位 / 左側に配置されます。

ラベルと主目盛をカスタマイズする場合、相互の位置関係を確認する必要があります。位置を合わせるには、目盛の間隔 (interval プロパティ) とラベルの間隔 (labelInterval プロパティ) を同じ値に設定します。(デフォルトで、labelInterval プロパティは設定されていませんが、interval に設定された値を使用するため、正しく位置合わせされます。)

イベント処理

igBulletGraph のラベルは、対応するイベントを処理する場合に追加でフォーマットし、位置合わせすることができます。

以下の表では、任意の動作と各イベントのマップを示します。

プロパティ設定

以下の表では、任意の動作と各プロパティ設定のマップを示します。構成可能な要素の実例については、例 - 水平方向を参照してください。

注: CSS のフォント関係のプロパティは、.ui-bulletgraph-label CSS クラスおよび .ui-bulletgraph CSS クラスにより設定できます。

例 - 水平方向

以下のスクリーンショットは、以下の設定の結果、デフォルトの水平方向で igBulletGraph の外観がどのようになるか示しています。

以下のコードはこの例を実装します。

JavaScript の場合:

('#igBulletGraph').igBulletGraph({
    width: 300,
    height: 70,
    labelExtent: 0.5,
    labelInterval: 30,
    labelsPostInitial: 20,
    labelsPreTerminal: 20,
    fontBrush: 'green'});

例 - 垂直方向

以下のスクリーンショットは、以下のプロパティ設定の結果、(例 - 水平方向の場合と同様に) 垂直方向で igBulletGraph の外観がどのようになるか示しています。

以下のコードはこの例を実装します。

JavaScript の場合:

('#igBulletGraph').igBulletGraph({
    height: 300,
    width: 70,
    orientation: 'vertical',
    labelExtent: 0.5,
    labelInterval: 30,
    labelsPostInitial: 20,
    labelsPreTerminal: 20,
    fontBrush: 'green'});

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

• 向きと方向の構成 (igBulletGraph) : このトピックは、垂直スケールと反転したスケール方向の両方またはいずれか一方により igBulletGraph コントロールを構成する方法を説明します。

• パフォーマンス バーの構成 (igBulletGraph): このトピックではコード例を使用して、igBulletGraph コントロールのパフォーマンス バーを構成する方法を説明します。説明には、バーが示す値、幅、位置、および書式設定が含まれます。

• 比較マーカーの構成 (igBulletGraph): このトピックではコード例を使用して、igBulletGraph コントロールの比較目盛マーカーを構成する方法を説明します。説明には、マーカーの値、幅、および書式設定が含まれます。

• 比較範囲の構成 (igBulletGraph): このトピックではコード例を使用して、igBulletGraph コントロールの範囲を構成する方法を説明します。説明には、範囲の数、位置、長さ、幅、および書式設定が含まれます。

• 背景の構成 (igBulletGraph): このトピックではコード例を使用して、ブレット グラフの背景を構成する方法を説明します。説明には、背景のサイズ、位置、色、および境界線の設定が含まれます。

• ツールチップの構成 (igBulletGraph): このトピックではコード例を使用して、igBulletGraph コントロールのツールチップを有効にする方法および表示する遅延時間を設定する方法を説明します。

サンプル

このトピックについては、以下のサンプルも参照してください。

• 目盛の設定: このサンプルでは、igBulletGraph コントロールのサポートされる目盛構成を紹介します。

• スケールのラベル設定: このサンプルでは、igBulletGraph コントロールのサポートされるスケール ラベリング構成を紹介します。