TreeMap
TreeMap
概要
機能
サンプル
設定
説明
このビューは、TreeMap の基本機能を示します。これは、チャートをデータモデルに連結します。
マウスをチャート要素の上に移動すると、そのデータポイントの詳細を示すツールチップが表示されます。
TreeMap チャートコントロールでは、Type 属性を使用して、レイアウトと外観をカスタマイズすることができます。
ソース
IndexController.cs
using MvcExplorer.Models;
using System.Collections.Generic;
using Microsoft.AspNetCore.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;
}
<c1-tree-map id="@demoSettingsModel.ControlId" binding="Sales"
binding-name="Category,SubCategory">
<c1-items-source source-collection="Model"></c1-items-source>
<c1-flex-chart-tooltip content="<b>{name}</b><br />{value:c}"></c1-flex-chart-tooltip>
<c1-flex-chart-datalabel position="Center" content="{name}"></c1-flex-chart-datalabel>
</c1-tree-map>
@section Description{
<p>@Html.Raw(TreeMapRes.Index_Text0)</p>
<p>@Html.Raw(TreeMapRes.Index_Text1)</p>
<p>@Html.Raw(TreeMapRes.Index_Text2)</p>
}
マニュアル