バージョン

チャート スケールの構成

トピックの概要

目的

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

前提条件

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

トピック 目的

このトピックでは、主要機能、最小要件、ユーザー機能など、 XamBulletGraph コントロールに関する概念的な情報を提供します。

このトピックでは、XamBulletGraph コントロールを WPF アプリケーションに追加する方法を説明します。

概要

スケール構成の概要

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

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

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

スケール構成の概要表

以下の表は、 XamBulletGraph コントロールのスケールで構成できる要素を簡単に説明し、構成に使用するプロパティへのマッピングです。

構成可能な点 プロパティ デフォルト値

位置

0.05

0.95

背景

デフォルトのテーマで定義済み

デフォルトのテーマで定義済み

1.0

最小値

0

最大値

100

主目盛

設定なし

0

0

0.1

0.2

デフォルトのテーマで定義済み

2.0

副目盛

3.0

0.06

0.2

デフォルトのテーマで定義済み

1.0

ラベル

0

設定なし

0

0

設定なし

デフォルトのテーマで定義済み

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

概要

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

BulletGraph Configuring the Scale 1.png

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

Note
注:

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

プロパティ設定

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

構成の目的: 詳細 使用するプロパティ: 設定の選択肢:

開始位置

水平方向で グラフ領域の左端からのスケールの開始位置、または垂直方向でグラフ領域の下端からのスケールの開始位置。

(スケールの方向が反転した場合、水平方向で右端、垂直方向で上端となります。詳細は、 向きと方向の構成を参照してください。)

方向に応じた、コントロールの高さと幅の相対部分として望ましい値。小数で指定 (例: 0.2)

終了位置

水平方向でコントロールの左端に対するグラフ領域の左端からのスケール の終了位置、または垂直方向ではグラフ領域の下端からのスケールの終了位置。

(スケールの方向が反転した場合、水平方向で右端、垂直方向で上端となります。詳細は、向きと方向の構成を参照してください。)

方向に応じた、コントロールの高さと幅の相対部分として望ましい値。小数で指定 (例: 0.8 )

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

プロパティ

ScaleStartExtent

0.2

ScaleEndExtent

0.9

BulletGraph Configuring the Scale 2.png

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

XAML の場合:

<ig:XamBulletGraph x:Name="bulletGraph"
                 ScaleStartExtent="0.2"
                 ScaleEndExtent="0.9"  />

C# の場合:

bulletGraph.ScaleStartExtent = .2;
bulletGraph.ScaleEndExtent = .9;

VB の場合:

bulletGraph.ScaleStartExtent = .2
bulletGraph.ScaleEndExtent = .9

スケールの範囲の構成

概要

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

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

BulletGraph Configuring the Scale 3.png

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

プロパティ設定

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

構成の目的: 詳細 使用するプロパティ: 設定の選択肢:

スケールの最小値

スケールが開始する値。

スケールのメジャーにおける任意の値

スケールの最大値

スケールが終了する値。

スケールのメジャーにおける任意の値

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

プロパティ

MinimumValue

60

MaximumValue

70

BulletGraph Configuring the Scale 4.png

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

XAML の場合:

<ig:XamBulletGraph
          MinimumValue="60"
          MaximumValue="70" />

C# の場合:

bulletGraph.MaximumValue = 70;
bulletGraph.MinimumValue = 60;

VB の場合:

bulletGraph.MaximumValue = 70
bulletGraph.MinimumValue = 60

スケールの主目盛の構成

概要

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

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

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

BulletGraph Configuring the Scale 5.png

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

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

BulletGraph Configuring the Scale 6.png

プロパティ設定

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

構成の目的: 詳細 使用するプロパティ: 設定の選択肢:

開始点

スケールの開始位置に対して主目盛が始まる距離

スケールの開始位置からスケールのメジャーの任意の距離

終了点

スケールの終了位置に対して主目盛が終了する距離

スケールの終了位置からスケールのメジャーの任意の距離

間隔

主目盛を配置する間隔 (間隔は、スケールのメジャーにおける隣接する 2 つの主目盛間の距離です。)

スケールのメジャーにおける任意の値

開始点

主目盛を形成する線分の開始点。

(開始点は、水平方向でグラフ領域の下部に対して定義され、垂直方向でグラフ領域の左端に対して定義されます。)

負の値もサポートされ、グラフ領域の下方 / 左側の位置に表示します。

方向に応じたグラフ領域の高さと幅の相対部分として、スケールのメジャーの望ましい値。小数で指定 (例: 0.2)

終了点

水平方向でグラフ領域の下部から主目盛を形成する線分の終了点、または垂直方向でグラフ領域の左の境界線からの主目盛の線分の終了点。

負の値もサポートされ、グラフ領域の下方 / 左側の位置に表示します。

(開始点と終了点間の差が目盛の線分の長さになります。)

方向に応じた、グラフ領域の高さと幅の相対部分として望ましい値。小数で指定 (例: 0.8 )

主目盛の線分の幅

任意の値 (ピクセル)

主目盛の色

任意の色

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

BulletGraph Configuring the Scale 7.png

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

XAML の場合:

<ig:XamBulletGraph Interval="30"
                 TickBrush="Lime"
                 TickEndExtent="0.9"
                 TicksPostInitial="30"
                 TicksPreTerminal="10"
                 TickStartExtent="0.5"
                 TickStrokeThickness="3" />

C# の場合:

bulletGraph.Interval = 30;
bulletGraph.TickBrush = new SolidColorBrush(Color.Lime);
bulletGraph.TickEndExtent = .9;
bulletGraph.TicksPostInitial = 30;
bulletGraph.TicksPreTerminal = 10;
bulletGraph.TickStartExtent = .5;
bulletGraph.TickStrokeThickness = 3;

VB の場合:

bulletGraph.Interval = 30
bulletGraph.TickBrush = New SolidColorBrush(Color.Lime)
bulletGraph.TickEndExtent = .9
bulletGraph.TicksPostInitial = 30
bulletGraph.TicksPreTerminal = 10
bulletGraph.TickStartExtent = .5
bulletGraph.TickStrokeThickness = 3

スケールの副目盛の構成

概要

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

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

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

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

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

BulletGraph Configuring the Scale 8.png

プロパティ設定

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

構成の目的: 詳細 使用するプロパティ: 設定の選択肢:

番号とスペース

隣接する 2 つの主目盛間の副目盛の数

任意の数。 0 を設定すると副目盛を非表示。

開始点

副目盛を形成する線分の開始点。

(開始点は、水平方向で グラフ領域の下部に対して定義され、垂直方向でグラフ領域の左端に対して定義されます。)

負の値もサポートされ、グラフ領域の下方 / 左側の位置に表示します。

方向に応じた、コントロールの高さと幅の相対部分として望ましい値。小数で指定 (例: 0.2)

終了点

水平方向ではグラフ領域の下部から副目盛を形成する線分の終了点、または垂直方向でグラフ領域の左の境界線からの副目盛の線分の終了点。

負の値もサポートされ、グラフ領域の下方 / 左側の位置に表示します。

(開始点と終了点間の差が目盛の線分の長さになります。)

方向に応じた、コントロールの高さと幅の相対部分として望ましい値。小数で指定 (例: 0.25)

副目盛の線分の幅

任意の値 (ピクセル)

副目盛の色

任意の色

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

BulletGraph Configuring the Scale 9.png

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

XAML の場合:

<ig:XamBulletGraph MinorTickBrush="Purple"
                 MinorTickCount="4"
                 MinorTickEndExtent="0.1"
                 MinorTickStartExtent="0.05"
                 MinorTickStrokeThickness="2"
                 Interval="20" />

C# の場合:

bulletGraph.MinorTickBrush = new SolidColorBrush(Color.Purple);
bulletGraph.MinorTickCount = 4;
bulletGraph.MinorTickEndExtent = .1;
bulletGraph.MinorTickStartExtent = .05;
bulletGraph.MinorTickStrokeThickness = 2;
bulletGraph.Interval = 20;

VB の場合:

bulletGraph.MinorTickBrush = New SolidColorBrush(Color.Purple)
bulletGraph.MinorTickCount = 4
bulletGraph.MinorTickEndExtent = .1
bulletGraph.MinorTickStartExtent = .05
bulletGraph.MinorTickStrokeThickness = 2
bulletGraph.Interval = 20

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

概要

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

  • 開始点および終了点 - スケールの両端での最初と最後のラベルの位置

  • ラベル行の幅 - 方向 (垂直 / 水平) に応じたコントロールの高さと幅に対する幅。この幅は、適用されたスタイル テンプレートのフォント設定のみで間接的に制御できます。

  • 発生する間隔 (相互距離)。( LabelsPostInitialLabelsPreTerminal、および LabelInterval プロパティにより定義されます。)

  • スケール全域のディメンションでのラベル行の位置 - デフォルトで、水平に対してコントロールの下部、垂直に対して左側に設定されています。水平のスケール方向で全行は垂直に移動し、垂直のスケール方向で水平に移動することができます。 LabelExtent プロパティにより定義されます。

BulletGraph Configuring the Scale 10.png

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

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

プロパティ設定

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

構成の目的: 詳細 使用するプロパティ: 設定の選択肢:

位置

垂直 / 水平方向に応じた、コントロールの下部 / 左端に対するラベル行の配置。

垂直 / 水平方向に応じた、コントロールの高さと幅の相対部分として望ましい値。小数で指定 (例: 0.8 )。

開始点

スケールに沿った最初のラベルのスケールのメジャーにおける位置

スケールの最初のラベルを表示するスケールのメジャーにおける値

終了点

スケールに沿った最後のラベルのスケールのメジャーにおける位置

スケールの最後のラベルを表示するスケールのメジャーにおける値

間隔

ラベルを配置する間隔 (間隔は、スケールのメジャーにおける隣接する 2 つのラベルの距離です。)

スケールのメジャーにおける任意の値

文字列の書式

ラベルの文字列の書式 (数値、時間、複合など)

任意の 文字列形式 (通貨の値を表示する {0:c} など)

フォント色

ラベルのフォント色

任意の色

例 - 水平方向

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

プロパティ

0.5

30

20

20

Green

BulletGraph Configuring the Scale 11.png

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

XAML の場合:

<ig:XamBulletGraph LabelExtent="0.5"
                 LabelInterval="30"
                 LabelsPostInitial="20"
                 LabelsPreTerminal="20"
                 FontBrush="Green" />

C# の場合:

bulletGraph.LabelExtent = .5;
bulletGraph.LabelInterval = 30;
bulletGraph.LabelsPostInitial = 20;
bulletGraph.LabelsPreTerminal = 20;
bulletGraph.FontBrush = new SolidColorBrush(Color.Green);

VB の場合:

bulletGraph.LabelExtent = .5
bulletGraph.LabelInterval = 30
bulletGraph.LabelsPostInitial = 20
bulletGraph.LabelsPreTerminal = 20
bulletGraph.FontBrush = New SolidColorBrush(Color.Green)

例 - 垂直方向

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

プロパティ

Vertical

0.5

30

20

20

Green

BulletGraph Configuring the Scale 12.png

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

XAML の場合:

<ig:XamBulletGraph Orientation="Vertical"
                 LabelExtent="0.5"
                 LabelInterval="30"
                 LabelsPostInitial="20"
                 LabelsPreTerminal="20"
                 FontBrush="Green" />

C# の場合:

bulletGraph.Orientation = LinearScaleOrientation.Vertical;
bulletGraph.LabelExtent = .8;
bulletGraph.LabelInterval = 30;
bulletGraph.LabelsPostInitial = 20;
bulletGraph.LabelsPreTerminal = 20;
bulletGraph.FontBrush = new SolidColorBrush(Color.Green);

VB の場合:

bulletGraph.Orientation = LinearScaleOrientation.Vertical
bulletGraph.LabelExtent = .8
bulletGraph.LabelInterval = 30
bulletGraph.LabelsPostInitial = 20
bulletGraph.LabelsPreTerminal = 20
bulletGraph.FontBrush = New SolidColorBrush(Color.Green)

関連コンテンツ

トピック

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

トピック 目的

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

このトピックでは、コード例を使用して、XamBulletGraph コントロールのタイトルおよびサブタイトルを構成する方法を説明します。説明には、タイトル領域の幅、テキストの開始位置、およびタイトル / サブタイトルのテキストが含まれます。

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

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

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

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

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

リソース

以下の資料 (Infragistics のコンテンツ ファミリー以外でもご利用いただけます) は、このトピックに関連する追加情報を提供します。

タイトル 目的

書式設定タイプに関する MSDN の概要記事には、特定の文字列の書式に関する補助記事もあります。