FlexChart for WPF
データ連結
TreeMap > データ連結

TreeMap チャートコントロールは、階層化データに連結して、ツリー型のデータの要素を入れ子の四角形として表します。データソースに連結してデータ項目を四角形として表示すると、構成要素となる四角形のサイズと色に基づいてデータ項目を分析および比較できます。

FlexChartBase クラスは、 ItemsSource プロパティを公開しています。このプロパティは、データを含むオブジェクトのコレクションを受け取り、ツリーマップチャートを生成します。Binding および BindingName プロパティを使用して、データ項目やそれぞれのカテゴリまたはグループに対応する四角形ノードを生成します。Binding プロパティは、四角形ノードのサイズ計算に使用される数値データ値を含むデータ項目のプロパティの名前を表す文字列値を受け取ります。一方、BindingName は、データ項目の名前を表す文字列値を受け取ります。ChildItemPath プロパティは、データ内の子項目をコントロールに伝えることで、指定されたデータコレクションの階層化構造を維持するために使用されます。

ツリーマップチャートでデータがどのように生成されるかを詳細に説明するために、複数のブランドの小売店の年次売上(販売数)を比較します。ツリーマップチャートを使用すると、分析をさらに四半期、月にドリルダウンできます。年次の売上が最上位レベルの四角形で表され、これらの年の四半期の売上が次のレベルを表し、次のレベルである月の売上がツリーマップのリーフノードを構成します。

次の図に、小売店の売上(販売数)を TreeMap チャートコントロールで示します。画像に階層化データが最大 3 つのレベル、つまり各年の四半期内の月のレベルまで表示されています。

TreeMap comparing sales

先頭に戻る

この例では、DataService クラスで生成されるデータがツリーマップチャートのソースになります。

  1. 階層化データソースを作成する
    1. コードビューで、次のコードで示すように、DataService クラスを作成して階層化データを生成します。
      Public Class DataService
          Private rnd As New Random()
          Shared _default As DataService
      
          Public Shared ReadOnly Property Instance() As DataService
              Get
                  If _default Is Nothing Then
                      _default = New DataService()
                  End If
      
                  Return _default
              End Get
          End Property
      
          Public Shared Function CreateHierarchicalData() As List(Of DataItem)
              Dim rnd As Random = Instance.rnd
      
              Dim years As New List(Of String)()
              Dim times As New List(Of List(Of String))() From {
                  New List(Of String)() From {
                      "1月",
                      "2月",
                      "3月"
                  },
                  New List(Of String)() From {
                      "4月",
                      "5月",
                      "6月"
                  },
                  New List(Of String)() From {
                      "7月",
                      "8月",
                      "9月"
                  },
                  New List(Of String)() From {
                      "10月",
                      "11月",
                      "12月"
                  }
              }
      
              Dim items As New List(Of DataItem)()
              Dim yearLen = Math.Max(CInt(Math.Round(Math.Abs(5
               - Instance.rnd.NextDouble() * 10))), 3)
              Dim currentYear As Integer = DateTime.Now.Year
              For i As Integer = yearLen To 1 Step -1
                  years.Add((currentYear - i).ToString())
              Next
              Dim quarterAdded = False
      
              years.ForEach(Function(y)
                            Dim i = years.IndexOf(y)
                            Dim addQuarter = Instance.rnd.NextDouble() > 0.5
                            If Not quarterAdded AndAlso i = years.Count - 1 Then
                                addQuarter = True
                            End If
                            Dim year = New DataItem() With {
                               .Year = y
                            }
                            If addQuarter Then
                            quarterAdded = True
                                times.ForEach(Function(q)
                                         Dim addMonth = Instance.rnd.NextDouble() > 0.5
                                         Dim idx As Integer = times.IndexOf(q)
                                         Dim quar As String
                                         quar = "Q" + (idx + 1).ToString
                                         Dim quarters = New DataItem() With {
                                              .Year = y,
                                              .Quarter = quar
                                          }
                                           If addMonth Then
                                            q.ForEach(Function(m)
                                               quarters.Items.Add(New DataItem() With {
                                                      .Year = y,
                                                      .Quarter = quar,
                                                      .Month = m,
                                                      .Value = rnd.[Next](20, 30)
                                                })
      
                                                     End Function)
                                           Else
                                            quarters.Value = rnd.[Next](80, 100)
                                           End If
                                            year.Items.Add(quarters)
      
                                      End Function)
                        Else
                          year.Value = rnd.[Next](80, 100)
                        End If
                          items.Add(year)
      
                        End Function)
      
              Return items
          End Function
      
      End Class
      
      public class DataService
      {
          Random rnd = new Random();
          static DataService _default;
      
          public static DataService Instance
          {
              get
              {
                  if (_default == null)
                  {
                      _default = new DataService();
                  }
      
                  return _default;
              }
          }      
      
          public static List<DataItem> CreateHierarchicalData()
          {
              Random rnd = Instance.rnd;
      
              List<string> years = new List<string>();
              List<List<string>> times = new List<List<string>>()
              {
                  new List<string>() { "1月", "2月", "3月"},
                  new List<string>() { "4月", "5月", "6月"},
                  new List<string>() { "7月", "8月", "9月"},
                  new List<string>() { "10月", "11月", "12月" }
              };
      
              List<DataItem> items = new List<DataItem>();
              var yearLen = Math.Max((int)Math.Round(Math.Abs(5 - 
              Instance.rnd.NextDouble() * 10)), 3);
              int currentYear = DateTime.Now.Year;
              for (int i = yearLen; i > 0; i--)
              {
                  years.Add((currentYear - i).ToString());
              }
              var quarterAdded = false;
      
              years.ForEach(y =>
              {
                  var i = years.IndexOf(y+"年");
                  var addQuarter = Instance.rnd.NextDouble() > 0.5;
                  if (!quarterAdded && i == years.Count - 1)
                  {
                      addQuarter = true;
                  }
                  var year = new DataItem() { Year = y };
                  if (addQuarter)
                  {
                      quarterAdded = true;
                      times.ForEach(q =>
                      {
                        var addMonth = Instance.rnd.NextDouble() > 0.5;
                        int idx = times.IndexOf(q);
                        var quar = "Q" + (idx + 1);
                        var quarters = new DataItem() { Year = y, Quarter = quar };
                        if (addMonth)
                        {
                           q.ForEach(m =>
                           {
                              quarters.Items.Add(new DataItem()
                                {
                                  Year = y,
                                  Quarter = quar,
                                  Month = m,
                                  Value = rnd.Next(20, 30)
                                });
                            });
                        }
                       else
                       {
                         quarters.Value = rnd.Next(80, 100);
                       }
                       year.Items.Add(quarters);
                    });
                  }
                  else
                  {
                      year.Value = rnd.Next(80, 100);
                  }
                  items.Add(year);
              });
      
              return items;
          }
      
      }
      
    2. DataItem クラスを作成して、データ項目とカテゴリを表すオブジェクトのリストを定義します。
      Public Class DataItem
          Private _items As List(Of DataItem)
      
          Public Property Year() As String
              Get
                  Return m_Year
              End Get
              Set
                  m_Year = Value
              End Set
          End Property
          Private m_Year As String
          Public Property Quarter() As String
              Get
                  Return m_Quarter
              End Get
              Set
                  m_Quarter = Value
              End Set
          End Property
          Private m_Quarter As String
          Public Property Month() As String
              Get
                  Return m_Month
              End Get
              Set
                  m_Month = Value
              End Set
          End Property
          Private m_Month As String
          Public Property Value() As Double
              Get
                  Return m_Value
              End Get
              Set
                  m_Value = Value
              End Set
          End Property
          Private m_Value As Double
          Public ReadOnly Property Items() As List(Of DataItem)
              Get
                  If _items Is Nothing Then
                      _items = New List(Of DataItem)()
                  End If
      
                  Return _items
              End Get
          End Property
      End Class
      
      public class DataItem
      {
          List<DataItem> _items;
      
          public string Year { get; set; }
          public string Quarter { get; set; }
          public string Month { get; set; }
          public double Value { get; set; }
          public List<DataItem> Items
          {
              get
              {
                  if (_items == null)
                  {
                      _items = new List<DataItem>();
                  }
      
                  return _items;
              }
          }
      }
      

    先頭に戻る

  2. データソースへの TreeMap の連結


    次のコードを使用して、データソースへの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>
    

    先頭に戻る

    Public Class TreeMapViewModel
        Public ReadOnly Property HierarchicalData() As List(Of DataItem)
            Get
                Return DataService.CreateHierarchicalData()
            End Get
        End Property
    End Class
    
    public class TreeMapViewModel
    {
        public List<DataItem> HierarchicalData
        {
            get
            {
                return DataService.CreateHierarchicalData();
            }
        }
    }
    
  3. プロジェクトの実行
    1. [ビルド]→[ソリューションのビルド]をクリックして、プロジェクトをビルドします。
    2. [F5]を押してプロジェクトを実行します。

    先頭に戻る

関連トピック