ASP.NET Core MVC コントロールヘルプ
クイックスタート：Sunburst へのデータの追加
コントロールの使用 > SunburstChart > クイックスタート：Sunburst へのデータの追加

このセクションでは、MVC WebアプリケーションにSunburstチャートを追加し、そこにデータを追加する方法について説明します。

このトピックは3つの手順で構成されます。

次の図は、上記の手順を実行した後のSunburstチャートを示しています。

手順 1：MVC アプリケーションの作成

ComponentOneまたはVisualStudioテンプレートを使用して新しいMVCアプリケーションを作成します。MVCアプリケーションの作成の詳細については、「MVCアプリケーションの設定」を参照してください。

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

  1. ［モデル］フォルダに新しいクラスを追加します（例：HierarchicalData.cs）。新しいモデルの追加方法については、「コントロールの追加」を参照してください。
  2. 新しいモデルに次のコードを追加して、クラスを定義します。
    SunburstController.cs
    コードのコピー 
    public class HierarchicalData
{
 public int ID {get; set;}
 public int Year {get; set;}
 public string Quarter {get; set;}
 public string Month {get; set;}
 public int Value {get; set;} 
public HierarchicalData(int year, string quarter, string month, int value)
 {
  Year = year;
  Quarter = quarter;
  Month = month;
  Value = value;
 }
 public HierarchicalData() {}
 public static List < HierarchicalData > GetData()
 {
  var data = new List < HierarchicalData > ();

  var times = new string[4, 3] {
   {"1月","2月","3月"}, 
   {"4月","5月","6月"},
   {"7月","8月","9月"},
   {"10月","11月","12月"}
  };
  var years = new int[] { 2015,2016,2017};

  for (int i = 0; i < years.Length; i++)
  {
   if (i % 2 == 0)
   {
    for (int j = 0; j < 4; j++)
    {
     string quar = "Q" + (j + 1);
     if (j % 2 == 0)
     {
      for (int k = 0; k < 3; k++)
      {
       data.Add(new HierarchicalData(years[i], quar, times[j, k], 100));
      }
     } else

     {
      data.Add(new HierarchicalData(years[i], quar, null, 100));
     }
    }
   } else
   {
    data.Add(new HierarchicalData(years[i], null, null, 100));
   }
  }
  return data;
 }
}
先頭に戻る

手順 3：Sunburst チャートの追加

Sunburst チャートを初期化するには、次の手順を実行します。

新しいコントローラーの追加

  1. ソリューションエクスプローラーで、［コントローラー］フォルダを右クリックします。
  2. コンテキストメニューから、［追加 →］→［コントローラー］を選択します。
  3. ［スキャフォールディングを追加］ダイアログで、次の手順を実行します。
    1. ［MVC 5 コントローラー -空］テンプレートを選択します。
    2. コントローラーの名前を設定します（例：SunburstController）。
    3. ［追加］をクリックします。
  4. 次に示すように MVC 参照を追加します。
    C#
    コードのコピー 
    using C1.Web.Mvc;
using C1.Web.Mvc.Serializition;
using C1.Web.Mvc.Chart;
  5. メソッド Index() を次のメソッドに置き換えます。
    SunburstController.cs
    コードのコピー 
    public ActionResult Index()
        {
            return View(Models.HierarchicalData.GetData());
        }
ビューの追加
  1. ソリューションエクスプローラーで、［コントローラー］フォルダを展開し、コントローラーSunburstControllerをダブルクリックして開きます。
  2. メソッドIndex()内にカーソルを置きます。
  3. 右クリックし、［ビューの追加］を選択します。［ビューの追加］ダイアログが表示されます。
  4. ［ビューの追加］ダイアログで、ビュー名が Index で、ビューエンジンが Razor (CSHTML)であることを確認します。
  5. ［追加］をクリックします。コントローラーにビューが追加されます。
    Razor
    コードのコピー 
    <c1-sunburst header="2015, 2016, 2017"
binding-name="Year, Quarter, Month" binding="Value">
<c1-items-source source-collection="Model"></c1-items-source>
<c1-flex-pie-datalabel content="{name}:{value}" position="Center">
</c1-flex-pie-datalabel>
</c1-sunburst>
先頭に戻る

手順4：プロジェクトのビルドおよび実行

  1. ［ビルド］→［ソリューションのビルド］をクリックして、プロジェクトをビルドします。
  2. ［F5］キーを押してプロジェクトを実行します。
    ブラウザのアドレスバーで、生成されたURLにフォルダ名とビュー名を付加してビューを確認します（例：http://localhost:1234/Sunburst/Index）。
先頭に戻る

 

 

Copyright © MESCIUS, Inc. All rights reserved.