バージョン

ブレット グラフ機能の概要

トピックの概要

目的

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

前提条件

このトピックを理解するためには、以下の概念を理解しておく必要があります。

概要

XamBulletGraph 概要

XamBulletGraph は、データをブレット グラフ形式で視覚化する Ultimate UI for Xamarin コントロールです。このコントロールはリニア デザインで、スケール (オプションで他のメモリ) に対する比較が可能な主目盛りをシンプルに表示できます。

BulletGraph Overview 1.png

XamBulletGraph コントロールは、高度なデータ表現を作成するための機能を提供します。ダッシュボードで使用されるメーターやゲージを、シンプルでなおかつ直感的で明解な棒チャートに置き換えます。ブレット グラフは、水平または垂直のわずかな領域で、ゴールに至る進捗、評価の範囲、複数の測定比較を表現するための最も効率的で効果的な方法の 1 つです。

主要機能

主要機能の概要

XamBulletGraph の機能には構成可能な向きや方向、視覚要素などがあります。このコントロールには、アニメーション化されたトランジションのサポートも組み込まれています。

主要な機能の概要表

以下の表で、XamBulletGraph コントロールの主な機能を簡単に説明します。

機能 説明

構成可能な向きと方向

XamBulletGraph コントロールでは、スケールの向きと方向の状態を設定する API が公開され、グラフの外観を大幅にカスタマイズすることができます。(詳細は、 向きと方向の構成のトピックを参照してください。)

構成可能な視覚要素

ブレット グラフの各視覚要素は、さまざまな形で構成できます。(詳細は、XamBulletGraph の構成可能な視覚要素と関連プロパティを参照してください。)

アニメーション化されたトランジション

XamBulletGraph コントロールには、その TransitionDuration プロパティによるアニメーションの組み込みサポートが提供されています。アニメーション効果は、コントロール読み込み時および任意のプロパティの値が変更された時に発生します。(詳細は、アニメーション トランジションの構成のトピックを参照してください。)

論理領域と構成可能な視覚要素の概要

論理領域

XamBulletGraph コントロールの表示領域は、論理的に以下の領域に分割されます: タイトル領域、予約領域、グラフ領域。

各領域は XamBulletGraph コントロールの一部の 視覚要素 に関連して異なる目的があります。

  • スケールに沿った方向 - 予約領域はタイトル領域が存在しない場合に、コントロールの端または上の図に示すようにタイトル領域の端のいずれかより開始され、コントロールの端で終了します。

  • スケール全域 -

    • 水平方向: 予約領域は、コントロールの下端から開始され、ラベルのフォントのサイズなどの書式設定に従い、番号ラベルと同じ高さまで上に広がります。

    • 垂直方向: 予約領域は、コントロールの左端から開始され、スケール測定番号の大きさおよびラベルのフォントのサイズなどの書式設定に従い、番号ラベルと同じ幅まで右に広がります。

予約領域の主な目的は、スケールの番号ラベルに対して、水平方向にも垂直方向にも十分なスペースを与えることにあります。(方向が変化した場合、番号ラベルを表示するための各方向へのスペース要求に対応するために、予約領域はサイズを自動的に調整します。水平方向ではラベルの高さ、垂直方向では最大幅に合わせます。)これは、必ずしも番号ラベルを予約領域に配置する必要があることを意味しません。実際、ラベル行はスケール全域で、グラフ領域内のどこにでも配置できます。しかし、ラベル行を予約領域の外に配置しても、予約領域自体のスプレッドおよび位置にはまったく影響はありません。予約領域は変化せず、番号ラベルの高さと幅により (方向に従い) 決定されます。

さらに予約領域が重要なのは、内側の端がスケール全体のディメンションにおいてグラフ領域の最初の端を特定する点です。この端が、スケール全域に構成可能な視覚要素視覚要素の一部を配置する範囲関連プロパティの参照マークの役割を果たします。(最も一般的な場合、これらのプロパティの正の値は視覚要素をグラフ領域の内部に置き、負の値は視覚要素を予約領域の内部に配置します。)

  • グラフ領域 (2) - ブレット グラフのパフォーマンス バー、目盛、範囲、およびオプションで番号ラベルを表示する領域です。ラベルを除く視覚要素の範囲関連のプロパティはすべて、その端に対して測定されます。グラフ領域は、プレースホルダーではなくコントロール内部にスケールを配置する (正確には、スケールの視覚要素を配置する) 参照フレームとして役割を果たします。

グラフ領域のスプレッド:

  • スケールに沿った方向 - グラフ領域はタイトル領域が存在しない場合に、コントロールの端または上の図に示すようにタイトル領域の端のいずれかより開始され、コントロールの端で終了します。スケールの開始位置および終了位置は両方とも、グラフ領域の始点側の端 (水平方向の左端または垂直方向の下端) に対して測定されます。

  • スケール全域 - グラフ領域は、予約領域の端 (水平方向でグラフ領域の下端または垂直方向でグラフ領域の左端) から開始されます。予約領域の境界線で接しているグラフ領域の端は、スケールの一部の視覚要素の範囲関連プロパティに対する、スケール全域に視覚要素を配置するための参照点としての役割を果たします。

構成可能な視覚要素

XamBulletGraph コントロールは、以下の視覚要素が特徴です(下の図を参照)。

  • パフォーマンス バー (3) - コントロールにより表示される主要なメジャーで、バーとして視覚化されます。

  • 比較マーカー (4) – パフォーマンス バー メジャーの比較評価。パフォーマンス バーの向きに対して直角に交わるマーカーとして表示されます。

  • 比較範囲 (5) - 範囲は、スケール上で指定した値の領域を強調表示する視覚的な要素です。その目的は、パフォーマンス バー メジャーの質的状態を視覚で伝えると同時に、その状態をレベルとして示すことにあります。

  • 目盛 (6) - 目盛は、ブレット グラフを読み取りやすくするために、目盛の間隔でスケールを分割して見せる役割を果たします。

    • 主目盛 - 主目盛は、スケールの主要な区切りとして使用されます。表示間隔、範囲、およびスタイルは、対応するプロパティを設定し制御できます。

    • 副目盛 - 副目盛は主目盛を補助し、スケールの数値を読み取りやすくするために追加して使用します。主目盛と同じ方法でカスタマイズできます。

  • スケール ラベル (7) - このラベルはスケールのメジャーを示します。

  • 境界線 (8) - コントロールのディメンションを視覚的に区切る線です。

  • 背景 (9) – 視覚要素が配置された背景のパターンおよび色を設定できます。

構成可能な視覚要素および関連プロパティ

構成可能な視覚要素および関連プロパティの概要

各要素は複数の項目で構成することができます。

以下の表は、XamBulletGraph コントロールの視覚要素で構成できる項目を示します。構成できる項目の詳細は、この表の次に示す各視覚要素の説明で、図および構成するプロパティと一緒に参照できます。

視覚要素 構成できる主な項目
  • 位置

  • 目盛

  • ラベル

  • 表示値

  • 幅と位置

  • ルックアンドフィール

  • 表示値

  • ルックアンドフィール

  • グラフに表示する範囲の数値

  • 長さ、幅、位置

  • ルックアンドフィール

  • サイズと位置

  • ルックアンドフィール

スケーリング

以下の図は、下の表にリストされたスケール関連の範囲を示しています。

グラフ領域内でスケールを配置する範囲 ラベルの位置を設定する範囲
BulletGraph Overview 9.png
BulletGraph Overview 10.png
スケールに沿って主目盛を設定する範囲 スケール全域で主目盛を設定する範囲
BulletGraph Overview 11.png
BulletGraph Overview 12.png
スケール全域で副目盛を設定する範囲
BulletGraph Overview 13.png

以下の表は、ブレット グラフのスケールの構成できる項目を示し、管理に使用する XamBulletGraph プロパティにマップします。

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

位置

0.05

0.95

最小値

0

最大値

100

主目盛

設定なし

0

0

0.02

0.2

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

2.0

副目盛

3.0

0.06

0.2

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

1.0

ラベル

0

設定なし

0

0

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

関連トピック

パフォーマンス バー

以下の図は、下の表にリストされたパフォーマンス バー関連の範囲を示しています。

BulletGraph Overview 88.png

以下の表は、ブレット グラフのパフォーマンス バーの構成できる項目を示し、管理に使用する XamBulletGraph プロパティにマップします。

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

表示する値

設定なし

幅と位置

0.5

0.65

塗りつぶし色

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

境界線の色

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

境界線の線幅

1.0

比較マーカー

以下の図は、下の表にリストされた比較マーカー関連の範囲を示しています。

BulletGraph Overview 15.png

以下の表は、ブレット グラフの比較マーカーの構成できる項目を示し、管理に使用する XamBulletGraph プロパティにマップします。

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

表示値

設定なし

3.0

塗りつぶし色

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

境界線の色

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

境界線の線幅

1.0

関連トピック

比較範囲

以下の図は、下の表にリストされた比較範囲関連の範囲を示しています。

BulletGraph Overview 16.png

以下の表は、ブレット グラフの比較範囲の構成できる項目を示し、管理に使用する XamBulletGraph プロパティにマップします。

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

グラフに表示する範囲の数値

設定なし

長さ、幅、位置

設定なし

設定なし

設定なし

設定なし

設定なし

設定なし

塗りつぶし色

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

境界線の色

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

境界線の線幅

1.0

関連トピック

背景

以下の図は、下の表にリストされた背景関連の範囲を示しています。

BulletGraph Overview 17.png

以下の表は、ブレット グラフの背景の構成できる項目を示し、管理に使用する XamBulletGraph プロパティにマップします。

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

スケール全域のスプレッドおよび位置

0

1.0

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

境界線の色

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

境界線の線幅

2.0

関連トピック

アニメーション トランジションの構成

アニメーション トランジションの構成概要

XamBulletGraph コントロールには、その TransitionDuration プロパティによるアニメーションの組み込みサポートが提供されています。アニメーション効果は、コントロール読み込み時および任意のプロパティの値が変更された時に発生します。デフォルトで、アニメーション化されたトランジションは無効になっています。ミリ秒単位で値を設定できるコントロールの TransitionDuration プロパティにより、ビューでコントロールをスワイプする時間枠を定義します。視覚要素は左下から右上に移動するスライド効果によって、すべて滑らかに表示されます。値を 0 に設定するとアニメーション トランジションが無効になります。

デフォルトの構成

デフォルト構成の概要

デフォルトで、XamBulletGraph コントロールは水平方向です。表示するスケールの範囲は、0 から 100 までです。コントロールの主目盛は 10 の間隔で表示され、主目盛間は副目盛で 3 つに区切られています。タイトルまたはサブタイトルが表示されていない場合、背景色はライト グレーになります。境界線は、2 ピクセルのダーク グレーの線です。比較マーカーまたは比較範囲が表示されていません。アニメーション化されたトランジションが無効です。

以下の図は、デフォルト設定の XamBulletGraph を示します。

BulletGraph Overview 18.png

要件

XamBulletGraph コントロールは Xamarin.Forms コントロールの 1 つで、 とは別にコントロール自体を含んでいます。 他の に依存します。ブレット グラフにパフォーマンス バーを表示するには、 Value プロパティを設定する必要があります。

完全な要件の一覧については、 XamBulletGraph の追加のトピックを参照してください。

関連コンテンツ

トピック

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

トピック 目的

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

このトピック グループは、向きや方向および視覚要素を含む XamBulletGraph コントロールのさまざまな要素を構成する方法を説明します。

このトピックでは、XamBulletGraph コントロールに関連するキー クラスやプロパティに関する参考情報を提供します。

リソース

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

タイトル 目的

この PDF 文書は、ブレット グラフの概念を紹介し、推奨するデザインを提供しています。