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>
|
|