TreeMap
設定
Type: Squarified
説明
このビューは、TreeMap の基本機能を示します。これは、チャートをデータモデルに連結します。
マウスをチャート要素の上に移動すると、そのデータポイントの詳細を示すツールチップが表示されます。
TreeMap チャートコントロールでは、Type プロパティを使用して、レイアウトと外観をカスタマイズすることができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | 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; } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | @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 > } |