TreeMap

ツリーマップは、階層化データを入れ子になった四角形で表示し、カテゴリごとの数量を対応する四角形のサイズで表示するデータ可視化ツールです。このチャートは、画面領域を大きく占有することなく大量の階層化データセットのパターンをすばやく把握するために便利です。たとえば、次のツリーマップは、さまざまなカテゴリにまたがる製品別の販売実績を、大きなスペースを取らずに表示しています。

WinForms ツリーマップ

WinForms ツリーマップの作成

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

デフォルトで、TreeMap コントロールは（上の図で示すように）正方形のレイアウトで表示され、ツリーマップの四角形をおおよそ正方形として配置します。このレイアウトは大規模なデータセットを表示する際にとても便利で、比較やパターンの把握を容易に行うことができます。ただし、ツリーマップを横長または縦長のレイアウトで表示することも可能です。それには TreeMap クラスにある ChartType プロパティを使用します。

横長ツリーマップ	縦長ツリーマップ

FlexChart を使用してツリーマップを作成するには

設計時

TreeMap コントロールをフォームにドラッグアンドドロップします。
フォームで TreeMap コントロールを右クリックして［プロパティ］ウィンドウを開きます。
DataSource プロパティを使用してデータソースを設定します。
Binding および BindingName プロパティを設定して、チャートを設定します。
ChildItemsPath プロパティに、子の項目を含むプロパティの名前を設定します。

コードの使用

WinForms ツリーマップをコードで作成するには、コントロールを初期化した後に、最初にデフォルトの系列をクリアします。DataSource プロパティを使用してデータソースを設定し、Binding および BindingName プロパティを設定してチャートを構成します。また、ChildItemsPath プロパティを設定して、階層化データ内に子の項目を生成します。

C#
VB.NET

// データをツリーマップに渡します
treeMap1.DataSource = GetTreeMapData();

// ツリーマップを「Sales」データにバインドします
treeMap1.Binding = "sales";
treeMap1.BindingName = "type";

// 子アイテムのフィールドを指定します
treeMap1.ChildItemsPath = "items";

// アイテムをドリルできるレベルまでの最大値を設定します
treeMap1.MaxDepth = 1;

' データをツリーマップに渡します
treeMap1.DataSource = GetTreeMapData()

' ツリーマップを「Sales」データにバインドします
treeMap1.Binding = "Sales"
treeMap1.BindingName = "Type"

' 子アイテムのフィールドを指定します
treeMap1.ChildItemsPath = "Items"

' アイテムをドリルできるレベルまでの最大値を設定します
treeMap1.MaxDepth = 1

上記のサンプルコードは、GetTreeMapData という名前のカスタムメソッドを使用してチャートにデータを提供しています。要件に基づいてデータソースを設定できます。

C#
VB.NET

        /// <summary>
        /// ツリーマップのデータを作成するメソッド
        /// </summary>
        Random rnd = new Random();
        int rand() { return rnd.Next(10, 100); }
        public object GetTreeMapData()
        {
            var data = new object[] { new {
        type = "Music",
        items = new [] { new {
            type = "Country",
            items= new [] { new {
                type= "Classic Country",
                sales = rand()
            }}
        }, new {
            type= "Rock",
            items= new [] { new {
                type= "Funk Rock",
                sales= rand()
             } }
        }, new {
            type= "Classical",
            items= new [] { new {
                type= "Symphonies",
                sales= rand()
                } }
  }}
}, new {
        type= "Books",
  items= new [] { new {
            type= "Arts & Photography",
    items= new [] { new {
                type= "Architecture",
      sales= rand()
    }}
  }, new {
            type= "Children's Books",
    items= new [] { new {
                type= "Beginning Readers",
      sales= rand()
    } }
  }, new {
            type= "History",
    items= new [] { new {
                type= "Ancient",
      sales= rand()
    } }
  }, new {
            type= "Mystery",
    items= new [] { new {
                type= "Thriller & Suspense",
      sales= rand()
             } }
  }, new {
            type= "Sci-Fi & Fantasy",
    items= new [] { new {
                type= "Fantasy",
      sales= rand()
    }}
  } }
}, new {
        type= "Electronics",
  items= new [] { new {
            type= "Wearable Technology",
    items= new [] { new {
                type= "Activity Trackers",
      sales= rand()
    }}
  }, new {
            type= "Cell Phones",
    items= new [] { new {
                type= "Accessories",
      sales= rand()
    } }
  }, new {
            type= "Headphones",
    items= new [] { new {
                type= "Earbud headphones",
      sales= rand()
    } }
  }, new {
            type= "Camera",
    items= new [] { new {
                type= "Digital Cameras",
      sales= rand()
             } }
  } }
}, new {
        type= "Video",
  items= new [] { new {
            type= "Movie",
    items= new [] { new {
                type= "Children & Family",
      sales= rand()
    } }
  }, new {
            type= "TV",
    items= new [] { new {
                type= "Comedy",
      sales= rand()
    } }
  } }
} };
            return data;
        }

''' <summary>
''' ツリーマップのデータを作成するメソッド
''' </summary>
Private rnd As New Random()
Private Function rand() As Integer
    Return rnd.[Next](10, 100)
End Function
Private Function GetTreeMapData() As Leaf()
    Dim data As Leaf() = New Leaf() {New Leaf With {
        .Type = "Music",
        .Items = {New Leaf With {
            .Type = "Country",
            .Items = {New Leaf With {
                .Type = "Classic Country",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Cowboy Country",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Outlaw Country",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Western Swing",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Roadhouse Country",
                .Sales = rand()
            }}
        }, New Leaf With {
            .Type = "Rock",
            .Items = {New Leaf With {
                .Type = "Hard Rock",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Blues Rock",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Funk Rock",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Rap Rock",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Guitar Rock",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Progressive Rock",
                .Sales = rand()
            }}
        }, New Leaf With {
            .Type = "Classical",
            .Items = {New Leaf With {
                .Type = "Symphonies",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Chamber Music",
                .Sales = rand()
            }}
        }, New Leaf With {
            .Type = "Soundtracks",
            .Items = {New Leaf With {
                .Type = "Movie Soundtracks",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Musical Soundtracks",
                .Sales = rand()
            }}
        }, New Leaf With {
            .Type = "Jazz",
            .Items = {New Leaf With {
                .Type = "Smooth Jazz",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Vocal Jazz",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Jazz Fusion",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Swing Jazz",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Cool Jazz",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Traditional Jazz",
                .Sales = rand()
            }}
        }, New Leaf With {
            .Type = "Electronic",
            .Items = {New Leaf With {
                .Type = "Electronica",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Disco",
                .Sales = rand()
            }, New Leaf With {
                .Type = "House",
                .Sales = rand()
            }}
        }}
    }, New Leaf With {
        .Type = "Video",
        .Items = {New Leaf With {
            .Type = "Movie",
            .Items = {New Leaf With {
                .Type = "Kid & Family",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Action & Adventure",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Animation",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Comedy",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Drama",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Romance",
                .Sales = rand()
            }}
        }, New Leaf With {
            .Type = "TV",
            .Items = {New Leaf With {
                .Type = "Science Fiction",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Documentary",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Fantasy",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Military & War",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Horror",
                .Sales = rand()
            }}
        }}
    }, New Leaf With {
        .Type = "Books",
        .Items = {New Leaf With {
            .Type = "Arts & Photography",
            .Items = {New Leaf With {
                .Type = "Architecture",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Graphic Design",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Drawing",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Photography",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Performing Arts",
                .Sales = rand()
            }}
        }, New Leaf With {
            .Type = "Children's Books",
            .Items = {New Leaf With {
                .Type = "Beginning Readers",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Board Books",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Chapter Books",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Coloring Books",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Picture Books",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Sound Books",
                .Sales = rand()
            }}
        }, New Leaf With {
            .Type = "History",
            .Items = {New Leaf With {
                .Type = "Ancient",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Medieval",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Renaissance",
                .Sales = rand()
            }}
        }, New Leaf With {
            .Type = "Mystery",
            .Items = {New Leaf With {
                .Type = "Mystery",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Thriller & Suspense",
                .Sales = rand()
            }}
        }, New Leaf With {
            .Type = "Romance",
            .Items = {New Leaf With {
                .Type = "Action & Adventure",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Holidays",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Romantic Comedy",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Romantic Suspense",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Western",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Historical",
                .Sales = rand()
            }}
        }, New Leaf With {
            .Type = "Sci-Fi & Fantasy",
            .Items = {New Leaf With {
                .Type = "Fantasy",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Gaming",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Science Fiction",
                .Sales = rand()
            }}
        }}
    }, New Leaf With {
        .Type = "Electronics",
        .Items = New Leaf() {New Leaf With {
            .Type = "Camera",
            .Items = New Leaf() {New Leaf With {
                .Type = "Digital Cameras",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Film Photography",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Lenses",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Video",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Accessories",
                .Sales = rand()
            }}
        }, New Leaf With {
            .Type = "Headphones",
            .Items = New Leaf() {New Leaf With {
                .Type = "Earbud headphones",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Over-ear headphones",
                .Sales = rand()
            }, New Leaf With {
                .Type = "On-ear headphones",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Bluetooth headphones",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Noise-cancelling headphones",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Audiophile headphones",
                .Sales = rand()
            }}
        }, New Leaf With {
            .Type = "Cell Phones",
            .Items = New Leaf() {New Leaf With {
                .Type = "Cell Phones",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Accessories",
                .Items = New Leaf() {New Leaf With {
                    .Type = "Batteries",
                    .Sales = rand()
                }, New Leaf With {
                    .Type = "Bluetooth Headsets",
                    .Sales = rand()
                }, New Leaf With {
                    .Type = "Bluetooth Speakers",
                    .Sales = rand()
                }, New Leaf With {
                    .Type = "Chargers",
                    .Sales = rand()
                }, New Leaf With {
                    .Type = "Screen Protectors",
                    .Sales = rand()
                }}
            }}
        }, New Leaf With {
            .Type = "Wearable Technology",
            .Items = New Leaf() {New Leaf With {
                .Type = "Activity Trackers",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Smart Watches",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Sports & GPS Watches",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Virtual Reality Headsets",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Wearable Cameras",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Smart Glasses",
                .Sales = rand()
            }}
        }}
    }, New Leaf With {
        .Type = "Computers & Tablets",
        .Items = {New Leaf With {
            .Type = "Desktops",
            .Items = New Leaf() {New Leaf With {
                .Type = "All-in-ones",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Minis",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Towers",
                .Sales = rand()
            }}
        }, New Leaf With {
            .Type = "Laptops",
            .Items = New Leaf() {New Leaf With {
                .Type = "2 in 1 laptops",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Traditional laptops",
                .Sales = rand()
            }}
        }, New Leaf With {
            .Type = "Tablets",
            .Items = {New Leaf With {
                .Type = "iOS",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Andriod",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Fire os",
                .Sales = rand()
            }, New Leaf With {
                .Type = "Windows",
                .Sales = rand()
            }}
        }}
    }}
    Return data
End Function