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

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

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

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

先頭に戻る

この例では、DataSource.cs クラスで生成されるデータがツリーマップチャートのソースになります。DataSource プロパティは、DataSource.cs クラスで生成される階層化データのコレクションを受け取ります。

1. 階層化データソースを作成する
   
   1. コードビューで、次のコードで示すように、DataService クラスを作成して階層化データを生成します。
      • Visual Basic
      • C#

      • Visual Basic

      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
      

      • C#

      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 クラスを作成して、データ項目とカテゴリを表すオブジェクトのリストを定義します。
      • Visual Basic
      • C#

      • Visual Basic

      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
      

      • C#

      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

   コードのコピー

   <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UwpTreeMapCS" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Chart="using:C1.Xaml.Chart" x:Class="UwpTreeMapCS.DataBinding" mc:Ignorable="d" DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid.DataContext> <local:TreeMapViewModel /> </Grid.DataContext> <Chart:C1TreeMap Binding="Value" BindingName="Year,Quarter,Month" ChildItemsPath="Items" ItemsSource="{Binding HierarchicalData}" MaxDepth="3">

   先頭に戻る

   • Visual Basic
   • C#

   • Visual Basic

   Public Class TreeMapViewModel
       Public ReadOnly Property HierarchicalData() As List(Of DataItem)
           Get
               Return DataService.CreateHierarchicalData()
           End Get
       End Property
   End Class
   

   • C#

   public class TreeMapViewModel
   {
       public List<DataItem> HierarchicalData
       {
           get
           {
               return DataService.CreateHierarchicalData();
           }
       }
   }
   

3. プロジェクトの実行
   1. ［ビルド］→［ソリューションのビルド］をクリックして、プロジェクトをビルドします。
   2. ［F5］を押してプロジェクトを実行します。

   先頭に戻る