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

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

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

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

tree map showing heirarchical data

先頭に戻る

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

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

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

  1. Visual Studio でユニバーサルアプリケーション を作成します。
  2. TreeMap コントロールを ツールボックスからページにドラッグアンドドロップします。
    次の dll が自動的にアプリケーションに追加されます。
    • C1.UWP.dll
    • C1.UWP.DX.dll
    • C1.UWP.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

    static Random rnd = new Random();
    static int rand()
    {
        return rnd.Next(10, 100);
    }
    public static 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
コードのコピー 
    <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.QuickStart"
    mc:Ignorable="d"
    DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Chart:C1TreeMap Binding="sales"
                         BindingName="type"
                         ChildItemsPath="items"
                         ItemsSource="{Binding DataContext.Data}"
                      MaxDepth="2">

            <Chart:C1TreeMap.DataLabel>
                <Chart:DataLabel Content="{}{name}"
                                 Position="Center">
                    <Chart:DataLabel.Style>
                        <Chart:ChartStyle/>
                    </Chart:DataLabel.Style>
                </Chart:DataLabel>
            </Chart:C1TreeMap.DataLabel>            
        </Chart:C1TreeMap>
    </Grid>
</Page>
先頭に戻る

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

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

先頭に戻る

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

 

 

Copyright © MESCIUS, Inc. All rights reserved.