TreeMaps are the data visualization tools that display the hierarchical data as a set of nested rectangles, while displaying the quantities for each category through area size of the corresponding rectangles. These charts are useful in giving a quick glimpse of patterns in huge hierarchical data sets without costing you much of screen real estate. For instance, below treemap shows the product-wise sales distribution across various categories without occupying much space.
FlexChart for WinUI provides treemap through a stand alone control which is represented by the C1TreeMap class. You can bind the chart with data using the ItemsSource property. This class also provides Binding and BindingName properties for generating rectangular nodes for data items and their respective categories or groups. While Binding property takes string value depicting the name of the property of data item that contains numeric data value, helpful in calculating the size of rectangular nodes, BindingName takes string value depicting the name of data items. ChildItemPath property ensures that a hierarchical structure of the provided data collection is maintained, by communicating to the control about the child items within the data.
By default, the TreeMap control displays the squarified layout (as shown in the image above) in which treemap rectangles are arranged as approximate squares. This layout is very useful for displaying large data sets and makes it easy to make comparisons and point patterns. However, you can also display your treemap in the horizontal or vertical layout by setting the ChartType property of C1TreeMap class.
Following XAML code is required to create the TreeMap chart using FlexChart:
| XAML |
コードのコピー
|
|---|---|
<c1:C1TreeMap x:Name="treeMap" Binding="sales" BindingName="type" ChildItemsPath="items" ChartType="Squarified" ItemsSource="{Binding Data}" MaxDepth="2" ToolTipContent="{}{value}" LegendPosition="Bottom"> <c1:C1TreeMap.DataLabel> <c1:DataLabel Content="{}{type}" Position="Center"/> </c1:C1TreeMap.DataLabel> </c1:C1TreeMap> |
|
Following C# code is required to attach the TreeMap chart with the data source:
| C# |
コードのコピー
|
|---|---|
public partial class TreeMap : ContentPage { object[] _data; public TreeMap() { InitializeComponent(); } public List<int> MaxDepths => new() { 1, 2, 3, 4 }; public object[] Data { get { if (_data == null) _data = DataSource.CreateHierarchicalData(); return _data; } } } class DataSource { public static object[] CreateHierarchicalData() { var data = new object[] { new { type = "音楽", items = new [] { new { type = "カントリー", items = new [] { new { type = "クラシックカントリー", sales = rand() }, new { type = "カウボーイカントリー", sales = rand() }, new { type = "アウトローカントリー", sales = rand() }, new { type = "ウェスタンスイング", sales = rand() }, new { type = ロードハウスカントリー", sales = rand() } } }, new { type = "ロック", items = new [] { new { type = "ハードロック", sales = rand() }, new { type = "ブルースロック", sales = rand() }, new { type = "ファンクロック", sales = rand() }, new { type = "ラップロック", sales = rand() }, new { type = "ギターロック", sales = rand() }, new { type = "ログレッシブロック", sales = rand() } } }, new { type = "クラシック", items = new [] { new { type = "交響曲", sales = rand() }, new { type = "室内楽", sales = rand() } } }, new { type = "サウンドトラック", items = new [] { new { type = "映画サウンドトラック", sales = rand() }, new { type = "ミュージカルサウンドトラック", sales = rand() } } }, new { type = "ジャズ", items = new [] { new { type = "スムーズジャズ", sales = rand() }, new { type = "ヴォーカルジャズ", sales = rand() }, new { type = "ジャズフュージョン", sales = rand() }, new { type = "スウィングジャズ", sales = rand() }, new { type = "クールジャズ", sales = rand() }, new { type = "トラディショナルジャズ", sales = rand() } } }, new { type = "エレクトロニカ", items = new [] { new { type = "エレクトロニカ", sales = rand() }, new { type = "ディスコ", sales = rand() }, new { type = "ハウス", sales = rand() } } } } }, new { type = "ビデオ", items = new [] { new { type = "映画", items = new [] { new { type = "子供向けと家族向け", sales = rand() }, new { type = "アクションと冒険", sales = rand() }, new { type = "アニメーション", sales = rand() }, new { type = "コメディ", sales = rand() }, new { type = "ドラマ", sales = rand() }, new { type = "ロマンス", sales = rand() } } }, new { type = "TV", items = new [] { new { type = "サイエンスフィクション", sales = rand() }, new { type = "ドキュメンタリー", sales = rand() }, new { type = "ファンタジー", sales = rand() }, new { type = "軍事と戦争", sales = rand() }, new { type = "ホラー", sales = rand() } } } } }, new { type = "書籍", items = new [] { new { type = "アートと写真", items = new [] { new { type = "建築", sales = rand() }, new { type = "グラフィックデザイン", sales = rand() }, new { type = "ドローイング", sales = rand() }, new { type = "写真術", sales = rand() }, new { type = "パフォーミングアーツ", sales = rand() } } }, new { type = "子供向け本", items = new [] { new { type = "初級読者向け本", sales = rand() }, new { type = "ボード本", sales = rand() }, new { type = "チャプター本", sales = rand() }, new { type = "ぬりえ本", sales = rand() }, new { type = "絵本", sales = rand() }, new { type = "サウンド本", sales = rand() } } }, new { type = "歴史", items = new [] { new { type = "古代", sales = rand() }, new { type = "中世", sales = rand() }, new { type = "ルネサンス", sales = rand() } } }, new { type = "ミステリー", items = new [] { new { type = "ミステリー", sales = rand() }, new { type = "スリラー、サスペンス", sales = rand() } } }, new { type = "ロマンス", items = new [] { new { type = "アクション、冒険", sales = rand() }, new { type = "休日", sales = rand() }, new { type = "ロマンティックコメディ", sales = rand() }, new { type = "ロマンティックサスペンス", sales = rand() }, new { type = "ウェスタン", sales = rand() }, new { type = "歴史的", sales = rand() } } }, new { type = "サイエンスフィクション、ファンタジー", items = new [] { new { type = "ファンタジー", sales = rand() }, new { type = "ゲーム", sales = rand() }, new { type = "サイエンスフィクション", sales = rand() } } } } }, new { type = "電子機器", items = new object[] { new { type = "カメラ", items = new [] { new { type = "デジタルカメラ", sales = rand() }, new { type = "フィルム写真術", sales = rand() }, new { type = "レンズ", sales = rand() }, new { type = "ビデオ", sales = rand() }, new { type = "アクセサリー", sales = rand() } } }, new { type = "ヘッドフォン", items = new [] { new { type = "イヤフォン", sales = rand() }, new { type = "オーバーイヤーヘッドフォン", sales = rand() }, new { type = "オンイヤーヘッドフォン", sales = rand() }, new { type = "Bluetoothヘッドフォン", sales = rand() }, new { type = "イズキャンセリングヘッドフォン", sales = rand() }, new { type = "オーディオファイル用ヘッドフォン", sales = rand() } } }, new { type = "携帯電話", items = new object[] { new { type = "携帯電話", sales = rand() }, new { type = "アクセサリー", items = new [] { new { type = "電池", sales = rand() }, new { type = "Bluetoothヘッドセット", sales = rand() }, new { type = "Bluetoothスピーカー", sales = rand() }, new { type = "充電器", sales = rand() }, new { type = "スクリーンプロテクター", sales = rand() } } } } }, new { type = "ウェアラブルテクノロジー", items = new [] { new { type = "アクティビティトラッカー", sales = rand() }, new { type = "スマートウォッチ", sales = rand() }, new { type = "スポーツ、GPSウォッチ", sales = rand() }, new { type = "仮想現実ヘッドセット", sales = rand() }, new { type = "ウェアラブルカメラ", sales = rand() }, new { type = "スマートグラス", sales = rand() } } } } }, new { type = "パソコンと タブレット", items = new [] { new { type = "デスクトップ", items = new [] { new { type = "オールインワン", sales = rand() }, new { type = "ミニ", sales = rand() }, new { type = "タワー", sales = rand() } } }, new { type = "ラップトップ", items = new [] { new { type = "2 in 1ラップトップ", sales = rand() }, new { type = "従来型ラップトップ", sales = rand() } } }, new { type = "タブレット", items = new [] { new { type = "iOS", sales = rand() }, new { type = "Andriod", sales = rand() }, new { type = "Fire os", sales = rand() }, new { type = "Windows", sales = rand() } } } } } }; return data; } static Random rnd = new Random(); static int rand() { return rnd.Next(10, 100); } } |
|