TreeMap チャートコントロールは、階層化データに連結して、ツリー型のデータの要素を入れ子の四角形として表します。データソースに連結してデータ項目を四角形として表示すると、構成要素となる四角形のサイズと色に基づいてデータ項目を分析および比較できます。
FlexChartBase クラスは、 ItemsSource プロパティを公開しています。このプロパティは、データを含むオブジェクトのコレクションを受け取り、ツリーマップチャートを生成します。Binding および BindingName プロパティを使用して、データ項目やそれぞれのカテゴリまたはグループに対応する四角形ノードを生成します。Binding プロパティは、四角形ノードのサイズ計算に使用される数値データ値を含むデータ項目のプロパティの名前を表す文字列値を受け取ります。一方、BindingName は、データ項目の名前を表す文字列値を受け取ります。ChildItemPath プロパティは、データ内の子項目をコントロールに伝えることで、指定されたデータコレクションの階層化構造を維持するために使用されます。
ツリーマップチャートでデータがどのように生成されるかを詳細に説明するために、複数のブランドの小売店の年次売上(販売数)を比較します。ツリーマップチャートを使用すると、分析をさらに四半期、月にドリルダウンできます。年次の売上が最上位レベルの四角形で表され、これらの年の四半期の売上が次のレベルを表し、次のレベルである月の売上がツリーマップのリーフノードを構成します。
次の図に、小売店の売上(販売数)を TreeMap チャートコントロールで示します。画像に階層化データが最大 3 つのレベル、つまり各年の四半期内の月のレベルまで表示されています。
この例では、DataService クラスで生成されるデータがツリーマップチャートのソースになります。
次のコードを使用して、データソースへのTreeMapコントロールを連結します。
XAML |
コードのコピー
|
---|---|
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WpfTreeMapCS" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="WpfTreeMapCS.DataBinding" DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}" mc:Ignorable="d" Title="DataBinding" Height="300" Width="300"> <Grid> <Grid.DataContext> <local:TreeMapViewModel /> </Grid.DataContext> <c1:C1TreeMap Binding="Value" BindingName="Year,Quarter,Month" ChildItemsPath="Items" ItemsSource="{Binding HierarchicalData}" MaxDepth="3"> <c1:C1TreeMap.DataLabel> <c1:DataLabel Content="{}{name}" Position="Center"> <c1:DataLabel.Style> <c1:ChartStyle/> </c1:DataLabel.Style> </c1:DataLabel> </c1:C1TreeMap.DataLabel> </c1:C1TreeMap> </Grid> </Window> |