Web Components ツリーマップ

Ignite UI for Web Components ツリーマップチャートは、ネストされた一連のノードとして階層 (ツリー構造) データを表示します。ツリーの各ブランチにはツリーマップノードが提供されて、サブマップを表す小さなノードでタイル化されます。各ノードの長方形には、データ上の指定されたディメンションに比例した領域があります。多くの場合、ノードは色分けされて、データの個別のディメンションを示します。

Web Components ツリーマップの例

次の例では、IgcTreemapComponent は世界の最大総面積の上位 30 の国を示しています。

ツリーマップの推奨事項

Web Components ツリーマップはプロジェクトに適していますか?

色とサイズのディメンションが何らかの方法でツリー構造と関連付けられている場合、他の方法では見つけにくいパターンを簡単に識別できます。ツリーマップは、より効率的にスペースを使用します。このため、数千の項目を同時に画面に表示することが可能となります。

ツリーマップは、データポイントの分類とそれらの値の相対的な違いの伝達に苦手なときが多い円チャートや他の形式のエリアチャートよりも効果的です。
ツリーマップは、ドリルダウンシナリオ用に設計されています。より効率的なデータ分析のために、小さな長方形で表されるデータセットに継続的にドリルダウンできます。
ツリーマップは、数値の表示ではなく相対的順位の表示に向いています。

他のデータの視覚化と同様に、ツリーマップチャートの視覚化は特定のシナリオで使用する必要があります。棒チャートや折れ線チャートのような視覚化と同じ問題は解決されません。これは、より複雑で豊富なデータ表示を目的としています。

ツリーマップのユースケース

ツリーマップを選択するための一般的なユースケースがいくつかあります:

階層データ (ブランチとサブブランチを持つツリーとして構成されたデータ) をドリルダウンする場合。
カテゴリ (ブランチ) とサブカテゴリ (サブブランチ) 間の相対的な重みと比較値の階層を説明したい場合。
コンパクトで効率の良い視覚化が必要な大規模なデータセットを表示したい場合。
正確な値を使用せずに、一目で迅速なデータ分析を提供したい場合長方形の相対的なサイズは、パターンや外れ値を非常に迅速に識別するのに役立ちます。
スペースを有効に使用したい場合ツリーマップは、数千の項目を同時に画面に表示することが可能となります。

以下の場合にツリーマップを使用しないでください:

正確な値を必要とするデータストーリーを説明している場合。
負のデータ値がある場合。
フラットで非階層的なデータがある場合。
データのサイズが類似している場合。

ツリーマップのデータ構造

データソースはデータ項目の配列またはリストである必要があります。
データソースにはデータ項目を少なくとも 1 つ含む必要があり、含まれない場合はマップでノードがレンダリングされません。
すべてのデータ項目には、labelMemberPath プロパティにマッピングする必要があるデータ列 (文字列など) を少なくとも 1 列含める必要があります。
すべてのデータ項目には、valueMemberPath プロパティにマッピングする必要がある数値データ列を少なくとも 1 列含める必要があります。
データを整理されたタイルに分類するには、オプションで parentIdMemberPath および idMemberPath を使用できます。

Web Components ツリーマップの構成

次の例では、ツリーマップは、layoutType プロパティと layoutOrientation プロパティを変更することにより、アルゴリズム構造を変更する機能を示しています。

レイアウトのタイプ

ツリーマップチャートは、データの相対的な重みを表示します。さまざまなアルゴリズムを使用して、データ項目のレイアウトをどのように行うかを決定します。

SliceAndDice - レイアウトのアルゴリズムは、縦横比を代わりに最初の順番を維持するようにします。
Squarified - レイアウトのタイリングアルゴリズムでは、SliceAndDice より縦横比がより正確で、Squarified より適切に並べ替えされます。
Stripped - タイプのアルゴリズムは、最適な縦横比を描画しますが、オブジェクトがサイズによって並べ替えられます。

ツリーマップを使用すると、要件に最適なアルゴリズムを選択できます。デフォルトでは、Squarified メソッドが使用されます。また、次の 2 つのメカニズムを使用してノードに色を付けることができる機能も含まれています。

項目を同じ値で色付けするグループベースのメカニズム。
階級区分図に似たスケールベースのメカニズムで、ノードの色をその値に基づいてマップします。

レイアウト方向:

layoutOrientation プロパティによってユーザーは階層のノードが展開される方向を設定できます。

layoutOrientation プロパティがレイアウトタイプ SliceAndDice および Strip と動作することに注意してください。

Horizontal – 子ノードは水平に積み重ねられます (SliceAndDice)。
Vertical – 子ノードは垂直に積み重ねられます (SliceAndDice)。

Web Components ツリーマップのスタイル設定

次の例では、ツリーマップは、NodeStylingScript イベントを介してスタイル設定することによって実現されるノードのルックアンドフィールを変更する機能を示しています。

その他のリソース

関連するチャートタイプの詳細については、以下のトピックを参照してください。

API リファレンス

以下は、上記のセクションで説明した API メンバーのリストです。