TreeMap
TreeMap
概要
機能
サンプル
設定
説明
このビューは、TreeMap の基本機能を示します。これは、チャートをデータモデルに連結します。
マウスをチャート要素の上に移動すると、そのデータポイントの詳細を示すツールチップが表示されます。
TreeMap チャートコントロールでは、Type プロパティを使用して、レイアウトと外観をカスタマイズすることができます。
ソース
IndexController.cs
using MvcExplorer.Models; using System.Collections.Generic; using System.Web.Mvc; namespace MvcExplorer.Controllers { public partial class TreeMapController : Controller { // GET: Index public ActionResult Index() { ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = CreateIndexSettings() }; return View(FoodSale.GetDate()); } private static IDictionary<string, object[]> CreateIndexSettings() { var settings = new Dictionary<string, object[]> { {"Type", new object[]{ "Squarified", "Horizontal", "Vertical"}} }; return settings; } } }
Index.cshtml
@model IEnumerable<FoodSale> @{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; } @(Html.C1().TreeMap().Id(demoSettingsModel.ControlId) .Binding("Sales") .BindingName("Category", "SubCategory") .Bind(Model) .Tooltip(t=>t.Content("<b>{name}</b><br />{value:c}")) .DataLabel(dlb => dlb.Position(C1.Web.Mvc.Chart.LabelPosition.Center).Content("{name}"))) @section Description{ <p>@Html.Raw(Resources.TreeMap.Index_Text0)</p> <p>@Html.Raw(Resources.TreeMap.Index_Text1)</p> <p>@Html.Raw(Resources.TreeMap.Index_Text2)</p> }
マニュアル