TreeMap
TreeMap
Max Depth
The TreeMap chart control allows you to set the maximum number of node levels to show in the current view by using the max-depth attribute.
Features
- Root
Settings
Max Depth: 2
Description
The TreeMap chart control allows you to set the maximum number of node levels to show in the current view by using the max-depth attribute.
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 30 31 32 33 34 35 36 37 38 39 40 | using MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class TreeMapController : Controller { // GET: MaxDepth public ActionResult MaxDepth() { ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = CreateMaxDepthSettings(), DefaultValues = GetMaxDepthDefaultValues() }; return View(ThingSale.GetDate()); } private static IDictionary<string, object[]> CreateMaxDepthSettings() { var settings = new Dictionary<string, object[]> { {"MaxDepth", new object[]{ 0, 1, 2, 3, 4}} }; return settings; } private static IDictionary<string, object> GetMaxDepthDefaultValues() { var defaultValues = new Dictionary<string, object> { {"MaxDepth", 2} }; return defaultValues; } } } |
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | @model IEnumerable<ThingSale> @{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; var defaultMaxDepth = (int)demoSettingsModel.DefaultValues["MaxDepth"]; } <ol id="breadCrumbs"></ol> <c1-tree-map id="@demoSettingsModel.ControlId" binding="Sales" binding-name="Category" child-items-path="Items" max-depth="@defaultMaxDepth" rendered="onRendered"> <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 Scripts{ <script type="text/javascript"> var breadCrumbs = []; var currentItem; var treemap; function onRendered() { if (!treemap) { treemap = wijmo.Control.getControl('#@demoSettingsModel.ControlId'); } if (treemap) { if (currentItem === treemap._currentItem) { return; } currentItem = treemap._currentItem; createBreadCrumbs(); } } function rollUp(num) { //rollup treemap *num times. for (var i = 0; i < num; i++) { treemap._rollUp(); } } function createBreadCrumbs() { breadCrumbs = []; resetBreadCrumbs(currentItem); breadCrumbs.reverse(); appendBreadCrumbs(); } function appendBreadCrumbs() { var ol = document.querySelector('#breadCrumbs'); ol.innerHTML = ''; var len = breadCrumbs.length; breadCrumbs.forEach(function (label, idx) { ol.appendChild(apendBreadCrumb(label, idx !== len - 1, len - idx - 1)); }); } function apendBreadCrumb(label, isAnchor, param) { var li = document.createElement('li'); if (isAnchor) { li.className = 'breakcrumb-item'; var a = document.createElement('a'); a.href = 'javascript:void(0)'; a.innerHTML = label; a.addEventListener('click', function (evt) { rollUp(param); }); li.appendChild(a); } else { li.className = 'breakcrumb-item active'; li.innerHTML = label; } return li; } function resetBreadCrumbs(item) { if (item) { breadCrumbs.push(item.label); resetBreadCrumbs(item.parent); } else { breadCrumbs.push('@(TreeMapRes.MaxDepth_Root)'); } } </script>} @section Description{ <p>@Html.Raw(TreeMapRes.MaxDepth_Text0)</p> } |