TreeMap
TreeMap
Overview
Features
Sample
Settings
Description
This view shows the basic features of TreeMap. It binds the chart to a data model.
If you move the mouse over a chart element, a tooltip will appear showing details about the data point.
The TreeMap chart control allows you to customize its layout and appearance by using the Type attribute.
Source
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> }
Documentation