TreeMap for ASP.NET Web Forms
クイックスタート：TreeMapの追加とカスタマイズ
トピックの内容
ここでは、次の手順を実行して、TreeMapコントロールを使用する簡単なアプリケーションを作成する方法を学びます。

以下の手順は、Visual Studio 2012で作成されたアプリケーション用です。使用するVisual Studioのバージョンによっては、手順が多少異なる場合があります。

手順１/２：WebフォームへのTreeMapの追加

  1. Visual Studioで、新しいASP.Net Webアプリケーションを作成し、新しいWebフォームを追加します。
  2. ツールボックスで、 TreeMapコントロールを見つけ、それをWebフォームにドラッグします。 
    ツールボックスにコントロールが見つからない場合は、右クリックして［アイテムの選択］を選択し、［ツールボックスアイテムの選択］ダイアログボックスでTreeMapを見つけます。
  3. コントロールを右クリックし、コンテキストメニューから［プロパティ］を選択してプロパティウィンドウを開きます。
  4. Heightを300pxに設定し、Widthを500pxに設定します。

手順２/２：TreeMapへの領域の追加

この手順では、TreeMapに３つのレベルの領域を追加します。これらのレベルは、世界、２つの大陸、および各大陸内の国を表します。

デザイナの場合

  1. TreeMapコントロールを選択し、スマートタグをクリックして［TreeMapのタスク］メニューを開きます。
  2. ［項目］をクリックします。これにより、TreeMapItemコレクションエディタが開きます。
  3. ［追加］ボタンをクリックして、TreeMapのレベル０に１つの領域を追加します。
  4. Labelを最大の国に設定し、Valueを6570549に設定します。
  5. Itemsプロパティの横にある省略符ボタン(...)をクリックして、再度TreeMapItemコレクションエディタを開きます。
  6. ［追加］ボタンを ２回クリックして、大陸に対応するサブ領域をレベル１に追加します。
    サブ領域にValueを設定する場合は、すべてのサブ領域のValueの合計が親領域のValueと等しくなる必要があることを忘れないでください。
  7. 項目１のLabelをAsiaに設定し、Valueを29982466に設定します。
  8. 項目２の LabelをAfricaに設定し、Valueを6588083に設定します。
  9. 同様に、TreeMapItemコレクションエディタを使用して、各大陸にそれぞれ３つの国に対応するサブ領域を追加します（レベル２）。
  10. レベル２の領域の Label、Value、および Color を次のように設定します。
    Asia
    プロパティ 値
    項目１ Color #FFCCFF
    Label Russia
    Value 17098242
    項目２ Color #33CCCC
    Label China
    Value 9596961
    項目３ Color #FFFFCC
    Label India
    Value 3287263
    Africa
    項目１ Color #CCFFCC
    Label Algeria
    Value 2381741
    項目２ Color #9966FF
    Label DRC
    Value 2344858
    項目３ Color #FFCC99
    Label Sudan
    Value 1861484
  11. ［OK］をクリックして、すべてのTreeMapItemコレクションエディタを閉じます。
  12. ［F5］キーを押してプロジェクトを実行します。

また、最下位レベルの各領域に色を設定するのではなく、親領域に対してMaxColor、MaxColorValue、MinColor、MinColorValue、MidColor、およびMidColorValueを設定することもできます。TreeMapコントロールは、入力された色の組み合わせに基づいて、子領域の色を自動的に設定します。詳細については、「色」トピックを参照してください。

ソースビューの場合

次のマークアップを<c1:C1TreeMap></c1:C1TreeMap>タグ内に追加して、TreeMapコントロールに領域を追加します。

ソースビュー
コードのコピー 
   <Items>
    <c1:TreeMapItem  Label=世界最大の国"  Value="36570549" >
        <Items>
            <c1:TreeMapItem  Label="Asia" Value="29982466">
                <Items>
                    <c1:TreeMapItem Color="#FFCCFF" Label="Russia" MaxColorValue="0" MidColorValue="0"
                     MinColorValue="0" Value="17098242" >      
                    </c1:TreeMapItem>
                    <c1:TreeMapItem Color="#33CCCC" Label="China" MaxColorValue="0" MidColorValue="0"
                     MinColorValue="0" Value="9596961">
                    </c1:TreeMapItem>
                    <c1:TreeMapItem Color="#FFFFCC" Label="India" MaxColorValue="0" MidColorValue="0"
                     MinColorValue="0" Value="3287263">
                    </c1:TreeMapItem>
                </Items>
            </c1:TreeMapItem>
            <c1:TreeMapItem  Label="Africa" Value="6588083">
                <Items>
                    <c1:TreeMapItem Color="#CCFFCC" Label="Algeria" MaxColorValue="0" MidColorValue="0"
                     MinColorValue="0" Value="2381741" >
                    </c1:TreeMapItem>
                    <c1:TreeMapItem Color="#9966FF" Label="DRC" MaxColorValue="0" MidColorValue="0"
                     MinColorValue="0" Value="2344858" >
                    </c1:TreeMapItem>
                    <c1:TreeMapItem Color="#FFCC99" Label="Sudan" MaxColorValue="0" MidColorValue="0"
                     MinColorValue="0" Value="1861484">
                    </c1:TreeMapItem>
                </Items>
            </c1:TreeMapItem>
        </Items>
    </c1:TreeMapItem>
</Items>

コードの場合

次のコードをPage_Loadイベントに追加して、TreeMapコントロールに領域を追加します。

C#でコードを書く場合

C#
コードのコピー 
// 領域を作成してレベル0に追加する
TreeMapItem largestcountries = new TreeMapItem();
largestcountries.Label = "世界最大の国";
largestcountries.Value = 36570549;
C1TreeMap1.Items.Add(largestcountries);

// 領域を作成してレベル0に追加する
TreeMapItem[] continents = new TreeMapItem[2];
for (int i = 0; i < 2; i++)
    continents[i] = new TreeMapItem();
continents[0].Label = "Asia";
continents[1].Label = "Africa";
continents[0].Value = 29982466;
continents[1].Value = 6588083;
for (int i = 0; i < 2; i++)
    C1TreeMap1.Items[0].Items.Add(continents[i]);

// 領域を作成してレベル2、大陸1に追加する
TreeMapItem[] countries1 = new TreeMapItem[3];
for (int i = 0; i < 3; i++)
    countries1[i] = new TreeMapItem();
countries1[0].Label = "Russia";
countries1[1].Label = "China";
countries1[2].Label = "India";
countries1[0].Value = 17098242;
countries1[1].Value = 9596961;
countries1[2].Value = 3287263;
countries1[0].Color = System.Drawing.ColorTranslator.FromHtml("#FFCCFF");
countries1[1].Color = System.Drawing.ColorTranslator.FromHtml("#33CCCC");
countries1[2].Color = System.Drawing.ColorTranslator.FromHtml("#FFFFCC"); ;
for (int i = 0; i < 3; i++)
    C1TreeMap1.Items[0].Items[0].Items.Add(countries1[i]);

// 領域を作成してレベル2、大陸2に追加する
TreeMapItem[] countries2 = new TreeMapItem[3];
for (int i = 0; i < 3; i++)
    countries2[i] = new TreeMapItem();
countries2[0].Label = "Algeria";
countries2[1].Label = "DRC";
countries2[2].Label = "Sudan";
countries2[0].Value = 2381741;
countries2[1].Value = 2344858;
countries2[2].Value = 1861484;
countries2[0].Color = System.Drawing.ColorTranslator.FromHtml("#CCFFCC");
countries2[1].Color = System.Drawing.ColorTranslator.FromHtml("#9966FF");
countries2[2].Color = System.Drawing.ColorTranslator.FromHtml("#FFCC99");
for (int i = 0; i < 3; i++)
    C1TreeMap1.Items[0].Items[1].Items.Add(countries2[i]);

VBでコードを書く場合

VB
コードのコピー 
' 領域を作成してレベル0に追加する
Dim largestcountries As New TreeMapItem()
largestcountries.Label = "世界最大の国"
largestcountries.Value = 36570549
C1TreeMap1.Items.Add(largestcountries)

' 領域を作成してレベル1に追加する
Dim continents As TreeMapItem() = New TreeMapItem(1) {}
For i As Integer = 0 To 1
    continents(i) = New TreeMapItem()
Next
continents(0).Label = "Asia"
continents(1).Label = "Africa"
continents(0).Value = 29982466
continents(1).Value = 6588083
For i As Integer = 0 To 1
    C1TreeMap1.Items(0).Items.Add(continents(i))
Next

' 領域を作成してレベル2、大陸1に追加する
Dim countries1 As TreeMapItem() = New TreeMapItem(2) {}
For i As Integer = 0 To 2
    countries1(i) = New TreeMapItem()
Next
countries1(0).Label = "Russia"
countries1(1).Label = "China"
countries1(2).Label = "India"
countries1(0).Value = 17098242
countries1(1).Value = 9596961
countries1(2).Value = 3287263
countries1(0).Color = System.Drawing.ColorTranslator.FromHtml("#FFCCFF")
countries1(1).Color = System.Drawing.ColorTranslator.FromHtml("#33CCCC")
countries1(2).Color = System.Drawing.ColorTranslator.FromHtml("#FFFFCC")
For i As Integer = 0 To 2
    C1TreeMap1.Items(0).Items(0).Items.Add(countries1(i))
Next

' 領域を作成してレベル2、大陸2に追加する
Dim countries2 As TreeMapItem() = New TreeMapItem(2) {}
For i As Integer = 0 To 2
    countries2(i) = New TreeMapItem()
Next
countries2(0).Label = "Algeria"
countries2(1).Label = "DRC"
countries2(2).Label = "Sudan"
countries2(0).Value = 2381741
countries2(1).Value = 2344858
countries2(2).Value = 1861484
countries2(0).Color = System.Drawing.ColorTranslator.FromHtml("#CCFFCC")
countries2(1).Color = System.Drawing.ColorTranslator.FromHtml("#9966FF")
countries2(2).Color = System.Drawing.ColorTranslator.FromHtml("#FFCC99")
For i As Integer = 0 To 2
    C1TreeMap1.Items(0).Items(1).Items.Add(countries2(i))
Next

ここまでの成果

プロジェクトを実行し、割り当てた色で各国が表示されていることを確認します。ラベルまたは領域をクリックすると領域が展開されます。右クリックすると元の領域に戻ります。

 

 

Copyright © GrapeCity, Inc. All rights reserved.