グループコレクション

TreeMapコントロールを使用すると、データをグループ化してコンテンツの表示を向上させることができます。TreeMapでグループを構成するには、ビューのGroupByプロパティを使用します。グループ化されたTreeMap項目は、ある値でグループ化されたツリーマップのリーフ項目のコレクションを表します。GroupHeaderを使用すると、TreeMapコントロール内でリーフ項目がどの値によってグループ化されているかを識別することができます。

次の図は、GroupByプロパティを設定した後のTreeMapコントロールを示しています。

以下のコード例では、「クイックスタート」セクションで追加したFoodSale.csモデルを使用しています。

コードの場合

Grouping.cshtml

Index.cshtml	コードのコピー
@model IEnumerable<FoodSale><c1-tree-map binding="Sales" binding-name="Category,SubCategory"> <c1-items-source source-collection="Model" group-by="Category,SubCategory"></c1-items-source> <c1-flex-chart-datalabel position="Center" content="{name}"></c1-flex-chart-datalabel> </c1-tree-map>

Index.cshtml

コードのコピー

@model IEnumerable<FoodSale><c1-tree-map binding="Sales" binding-name="Category,SubCategory">
<c1-items-source source-collection="Model" group-by="Category,SubCategory"></c1-items-source>
<c1-flex-chart-datalabel position="Center" content="{name}"></c1-flex-chart-datalabel>
</c1-tree-map>