FlexChart for WPF
クイックスタート
TreeMap > クイックスタート

このクイックスタートでは、TreeMapチャートをWPFアプリケーションに追加し、階層データを表示する手順を説明します。このトピックでは、特定の年にXYZという市で書籍、音楽、ビデオ、ガジェット（コンピュータやタブレットなど）の販売を比較するとします。

TreeMapコントロールに階層データを表示する手順は次のようになります。

次の図は、特定の年にXYZ市でさまざまな書籍、音楽、ビデオ、ガジェット（コンピュータやタブレットなど）の販売を展示して比較しています。

tree map showing heirarchical data

先頭に戻る

チャートにプロットされるデータポイントを含むオブジェクトのコレクションを指すように、FlexChartBase クラスのItemsSourceプロパティを設定する必要があります。 データ項目を生成してTreeMapチャートに表示するには、BindingNameプロパティとBindingプロパティを設定します。 BindingName プロパティを、グラフの四角形として表示するデータ項目の名前を指定する文字列値に設定します。そして、Binding プロパティを、チャート値（ツリーノードのサイズを計算するのに役立つ数値）を含むチャートアイテムのプロパティの名前を指定する文字列値に設定します。

階層項目のレベルをドリルダウンに指定してチャートに表示するには、MaxDepthプロパティを設定します。また、TreeMapの表示レイアウトはChartTypeプロパティで指定します。カラーパレットを使用してコントロールをスタイル設定し、その外観を変更することもできます。

手順 1：プロジェクトへのTreeMap の追加

  1. Visual Studio でWindows フォームアプリケーション を作成します。
  2. TreeMap コントロールを ツールボックスからページにドラッグアンドドロップします。
    次の dll が自動的にアプリケーションに追加されます。
    • C1.WPF.dll
    • C1.WPF.FlexChart.dll

先頭に戻る

手順 2：階層データソースの作成

コードビューに切り替えて、書物、音楽、電子機器、ビデオ、コンピュータおよびタブレットの販売データを生成するために次のコードを追加します。

Private rnd As New Random()
Private Function rand() As Integer
    Return rnd.[Next](10, 100)
End Function

Public ReadOnly Property Data() As Object()
    Get
        Dim data__1 = New Object() {New With {
         .type = "音楽",
         .items = New () {New With {
             .type = "カントリー",
             .items = New () {New With {
                 .type = "クラシックカントリー",
                 .sales = rand()
            }}
        }, New With {
             .type = "ロック",
             .items = New () {New With {
                 .type = "ファンクロック",
                 .sales = rand()
            }}
        }, New With {
             .type = "クラシック",
             .items = New () {New With {
                 .type = "交響曲",
                 .sales = rand()
            }}
        }}
    }, New With {
         .type = "書物",
         .items = New () {New With {
             .type = "美術と写真",
             .items = New () {New With {
                 .type = "建築",
                 .sales = rand()
            }}
        }, New With {
             .type = "児童書",
             .items = New () {New With {
                 .type = "読者を始めよう",
                 .sales = rand()
            }}
        }, New With {
             .type = "歴史",
             .items = New () {New With {
                 .type = "古代",
                 .sales = rand()
            }}
        }, New With {
             .type = "推理",
             .items = New () {New With {
                 .type = "スリラー",
                 .sales = rand()
            }}
        }, New With {
             .type = "サイエンスフィクション",
             .items = New () {New With {
                 .type = "ファンタジー",
                 .sales = rand()
            }}
        }}
    }, New With {
         .type = "電子機器",
         .items = New () {New With {
             .type = "ウェアラブルデバイス",
             .items = New () {New With {
                 .type = "アクティビティログ",
                 .sales = rand()
            }}
        }, New With {
             .type = "携帯電話",
             .items = New () {New With {
                 .type = "アクセサリ",
                 .sales = rand()
            }}
        }, New With {
             .type = "ヘッドフォン",
             .items = New () {New With {
                 .type = "イヤホン",
                 .sales = rand()
            }}
        }, New With {
             .type = "カメラ",
             .items = New () {New With {
                 .type = "デジタルカメラ",
                 .sales = rand()
            }}
        }}
    }, New With {
         .type = "ビデオ",
         .items = New () {New With {
             .type = "映画",
             .items = New () {New With {
                 .type = "子ども",
                 .sales = rand()
            }}
        }, New With {
             .type = "テレビ",
             .items = New () {New With {
                 .type = "コメディー",
                 .sales = rand()
            }}
        }}
    }}
        Return data__1
    End Get
End Property

    Random rnd = new Random();
    int rand()
    {
        return rnd.Next(10, 100);
    }

    public object[] Data
    {
        get
        {
            var data = new object[] { new {
        type = "音楽",
        items = new [] { new {
            type = "カントリー",
            items= new [] { new {
                type= "クラシックカントリー",
                sales = rand()
            }}
        }, new {
            type= "ロック",
            items= new [] { new {
                type= "ファンクロック",
                sales= rand()
             } }
        }, new {
            type= "クラシック",
            items= new [] { new {
                type= "交響曲",
                sales= rand()
                } }
  }}
}, new {
        type= "書物",
  items= new [] { new {
            type= "美術と写真",
    items= new [] { new {
                type= "建築",
      sales= rand()
    }}
  }, new {
            type= "児童書",
    items= new [] { new {
                type= "読者を始めよう",
      sales= rand()
    } }
  }, new {
            type= "歴史",
    items= new [] { new {
                type= "古代",
      sales= rand()
    } }
  }, new {
            type= "推理",
    items= new [] { new {
                type= "スリラー",
      sales= rand()
             } }
  }, new {
            type= "サイエンスフィクション",
    items= new [] { new {
                type= "ファンタジー",
      sales= rand()
    }}
  } }
}, new {
        type= "電子機器",
  items= new [] { new {
            type= "ウェアラブルデバイス",
    items= new [] { new {
                type= "アクティビティログ",
      sales= rand()
    }}
  }, new {
            type= "携帯電話",
    items= new [] { new {
                type= "アクセサリ",
      sales= rand()
    } }
  }, new {
            type= "ヘッドフォン",
    items= new [] { new {
                type= "イヤホン",
      sales= rand()
    } }
  }, new {
            type= "カメラ",
    items= new [] { new {
                type= "デジタルカメラ",
      sales= rand()
             } }
  } }
}, new {
        type= "ビデオ",
  items= new [] { new {
            type= "映画",
    items= new [] { new {
                type= "子ども",
      sales= rand()
    } }
  }, new {
            type= "テレビ",
    items= new [] { new {
                type= "コメディー",
      sales= rand()
    } }
  } }
} };
            return data;
        }

先頭に戻る

手順 3：データソースへの 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.QuickStart"
    DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
        mc:Ignorable="d"
        Title="QuickStart"
    Height="312" Width="434">
    <Grid Margin="10,0,0,0">
        <c1:C1TreeMap Binding="sales"
                      MaxDepth="2"
                      BindingName="type"
                      ChildItemsPath="items"
                      ItemsSource="{Binding DataContext.Data}" >
            <c1:C1TreeMap.DataLabel>
                <c1:DataLabel Content="{}{type}"
                              Position="Center">
                    <c1:DataLabel.Style>
                        <c1:ChartStyle/>
                    </c1:DataLabel.Style>
                </c1:DataLabel>
            </c1:C1TreeMap.DataLabel>            
        </c1:C1TreeMap>
    </Grid>
</Window>
先頭に戻る

手順 4：プロジェクトの実行

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

先頭に戻る

関連トピック
TreeMap
主な機能
要素
レイアウト
データ連結
選択

 

 

Copyright © MESCIUS, Inc. All rights reserved.