このトピックでは、MVC WebアプリケーションにTreeMapコントロールを追加し、そこにモデル連結を使用してデータを追加する方法について説明します。このトピックは次の4つの手順で構成されます。
次の図に、上の手順を実行した後のTreeMapコントロールを示します。
ComponentOneまたはVisualStudioテンプレートを使用して、新しいMVCアプリケーションを作成します。MVCアプリケーションの作成方法については、「MVCアプリケーションの構成」を参照してください。
FoodSale.cs
)。新しいモデルを追加する方法の詳細については、「コントロールの追加」を参照してください。FoodSale.cs
モデルに追加します。ここでは、FoodSale
クラスを使用して階層化データリストを表しています。
C# |
コードのコピー
|
---|---|
using System; using System.Collections.Generic; namespace TreeMapQuickStart.Models { public class FoodSale { private static List<string> Categories = _new List<string> { "飲料", "調味料", "菓子類", "乳製品" }; private static List<string[]> SubCategories = new List<string[]> { new string[] { "ソフトドリンク", "コーヒー", "お茶", "ビール", "アレス" }, new string[] { "甘くて味の良いソース", "前菜", "スプレッド", "調味料" }, new string[] { "デザート", "キャンディー", "パン" }, new string[] { "チーズ", "牛乳" }, }; public string Category { get; set; } public string SubCategory { get; set; } public double Sales { get; set; } public static IEnumerable<FoodSale> GetData() { var result = new List<FoodSale>(); var rand = new Random(0); var index = 0; foreach (var cat in Categories) { var subCategories = SubCategories[index++]; foreach (var subCat in subCategories) { result.Add(new FoodSale { Category = cat, SubCategory = subCat, Sales = rand.NextDouble() * 100 }); } } return result; } public static IEnumerable<FoodSale> GetGroupData() { var result = new List<FoodSale>(); var rand = new Random(0); var catLen = Categories.Count; for (var i = 0; i < 1000; i++) { var randomC = rand.Next(0, catLen - 1); var subCat = SubCategories[randomC]; var randomSC = rand.Next(0, subCat.Length - 1); result.Add(new FoodSale { Category = Categories[randomC], SubCategory = subCat[randomSC], Sales = rand.NextDouble() * 100 }); } return result; } } } |
アプリケーションにTreeMapコントロールを追加する手順は、次のとおりです。
新しいコントローラーの追加
TreeMapController
)。C# |
コードのコピー
|
---|---|
using <ApplicationName>.Models;
|
TreeMapController.cs |
コードのコピー
|
---|---|
public ActionResult Index() { return View(FoodSale.GetData()); } |
TreeMapController
をダブルクリックして開きます。Index()
内にカーソルを置きます。Index.cshtml |
コードのコピー
|
---|---|
@using <ApplicationName>.Models; @using System.Drawing; @model IEnumerable<FoodSale> @(Html.C1().TreeMap().Id("TreeMap") .Type(TreeMapType.Squarified) .Binding("Sales") .BindingName("Category", "SubCategory") .Bind(Model) .DataLabel(dlb => dlb.Position _(C1.Web.Mvc.Chart.LabelPosition.Center).Content("{name}"))) |