Blazor ツリーマップの概要
Ignite UI for Blazor ツリーマップは、ネストされた一連のノードとして階層 (ツリー構造) データを表示します。ツリーの各ブランチにはツリーマップ ノードが提供されて、サブマップを表す小さなノードでタイル化されます。各ノードの長方形には、データ上の指定されたディメンションに比例した領域があります。多くの場合、ノードは色分けされて、データの個別のディメンションを示します。
Blazor ツリーマップの例
色とサイズのディメンションが何らかの方法でツリー構造と関連付けられている場合、他の方法では見つけにくいパターンを簡単に識別できます。ツリーマップは、より効率的にスペースを使用します。このため、数千の項目を同時に画面に表示することが可能となります。
ツリーマップは、数値の表示ではなく相対的順位の表示に向いています。ツリーマップは、データ ポイントを分類し、値の相対的な差異の表示が円チャートや他のエリア チャートよりも効果的です。
データの要件
Treemap
のバインドは以下のデータ要件があります。
- データソースはデータ項目の配列またはリストである必要があります。
- データソースにはデータ項目を少なくとも 1 つ含む必要があり、含まれない場合はマップでノードがレンダリングされません。
- すべてのデータ項目には、
LabelMemberPath
プロパティにマッピングする必要があるデータ列 (文字列など) を少なくとも 1 列含める必要があります。 - すべてのデータ項目には、
ValueMemberPath
プロパティにマッピングする必要がある数値データ列を少なくとも 1 列含める必要があります。 - データを整理されたタイルに分類するには、オプションで
ParentIdMemberPath
およびIdMemberPath
を使用できます。
レイアウトのタイプ
Ignite UI for Blazor ツリーマップ コンポーネントは、以下のタイプのアルゴリズムをサポートします。
SliceAndDice
Squarified
Stripped
型は TreemapLayoutType
プロパティの設定により定義されます。TreemapLayoutType
プロパティが指定されていない場合は、既定では Stripped
型が表示されます。データを表示するようになる時にはさまざまなタイル アルゴリズムがあります。すべてのアルゴリズムには、ユーザーのニーズに基づいて利点があります。最適なアスペクト比を得ることを目的とするものもあります。ノードは可能な限り長方形に近くなります。その他のアルゴリズムは、要素の初期順序を保持することを目的としています。データソース内で互いに近いオブジェクトは、ツリーマップ上で互いに近くに配置されます。
Stripped
タイプのアルゴリズムは、最適な縦横比を描画しますが、オブジェクトがサイズによってソートされます。SliceAndDice
レイアウトのアルゴリズムは、縦横比を代わりに最初の順番を維持するようにします。Squarified
レイアウトのタイル アルゴリズムでは、SliceAndDice より縦横比がより正確で、Squarified より適切にソートされます。
レイアウトの方向
LayoutOrientation
プロパティによってユーザーは階層のノードが展開される方向を設定できます。
LayoutOrientation プロパティがレイアウト タイプ SliceAndDice および Strip と動作することに注意してください。
Horizontal
– 子ノードは水平に積み重ねられます (SliceAndDice)。Vertical
– 子ノードは垂直に積み重ねられます (SliceAndDice)。
モジュールの要件
Treemap
を作成するには、以下のモジュールが必要です。
TreemapModule.Register(IgniteUIBlazor);
コード スニペット
以下のコードは、Treemap を設定する方法を示します。
<Treemap Height="100%" Width="100%"
DataSource="Data"
LayoutType="TreemapLayoutType.Stripped"
LayoutOrientation="TreemapOrientation.Horizontal"
ParentIdMemberPath="parent"
IdMemberPath="id"
LabelMemberPath="name"
ValueMemberPath="pop"
TransitionDuration="500"
RootTitle="Countries" />
塗りつぶしスケール
以下のコードは、Treemap の塗りつぶしスケールを設定する方法を示します。
<Treemap Height="100%" Width="100%"
DataSource="Data"
ParentIdMemberPath="Parent"
IdMemberPath="Name"
LabelMemberPath="Name"
ValueMemberPath="Pop"
FillScaleMode="TreemapFillScaleMode.Value"
FillScaleMinimumValue="0"
FillScaleMaximumValue="1500000000"
FillBrushes="#4e62cf, #8a58d6"
IsFillScaleLogarithmic="false"
RootTitle="Countries" />