TreeMap
TreeMap
Theming
The TreeMap chart control allows you to customize the appearance by using the Palette property.
You can set a collection to this property.
Features
Description
The TreeMap chart control allows you to customize the appearance by using the Palette property.
You can set a collection to this property. The collection item type could be System.Drawing.Color or C1.Web.Mvc.TreeMapItemStyle.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | using MvcExplorer.Models;using System.Web.Mvc;namespace MvcExplorer.Controllers{ public partial class TreeMapController : Controller { // GET: Theming public ActionResult Theming() { return View(FoodSale.GetDate()); } }} |
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 | @using System.Drawing;@model IEnumerable<FoodSale>@{ ViewBag.DemoSettings = false; var colors = new List<string> { "#88bde6", "#fbb258", "#90cd97", "#f6aac9", "#bfa554", "#bc99c7", "#eddd46", "#f07e6e", "#8c8c8c" };}@(Html.C1().TreeMap() .Binding("Sales") .BindingName("Category", "SubCategory") .Bind(Model) .Palette(tmissb => tmissb .Add(tmisb => tmisb.TitleColor(ColorTranslator.FromHtml("#00277d")) .MaxColor(Color.FromArgb(179, 0, 39, 125)) .MinColor(Color.FromArgb(179, 168, 187, 230))) .Add(tmisb => tmisb.TitleColor(ColorTranslator.FromHtml("#7d1f00")) .MaxColor(Color.FromArgb(179, 125, 21, 0)) .MinColor(Color.FromArgb(179, 230, 183, 168))) .Add(tmisb => tmisb.TitleColor(ColorTranslator.FromHtml("#007d27")) .MaxColor(Color.FromArgb(179, 0, 125, 39)) .MinColor(Color.FromArgb(179, 168, 230, 188))) .Add(tmisb => tmisb.TitleColor(ColorTranslator.FromHtml("#7d003c")) .MaxColor(Color.FromArgb(179, 125, 0, 60)) .MinColor(Color.FromArgb(179, 230, 168, 198))) .Add(tmisb => tmisb.TitleColor(ColorTranslator.FromHtml("#7d4300")) .MaxColor(Color.FromArgb(179, 125, 67, 0)) .MinColor(Color.FromArgb(179, 230, 201, 168))) .Add(tmisb => tmisb.TitleColor(ColorTranslator.FromHtml("#51007d")) .MaxColor(Color.FromArgb(179, 81, 0, 125)) .MinColor(Color.FromArgb(179, 209, 170, 230))) .Add(tmisb => tmisb.TitleColor(ColorTranslator.FromHtml("#7d7400")) .MaxColor(Color.FromArgb(179, 125, 116, 0)) .MinColor(Color.FromArgb(179, 230, 226, 168))) .Add(tmisb => tmisb.TitleColor(ColorTranslator.FromHtml("#970000")) .MaxColor(Color.FromArgb(179, 151, 0, 0)) .MinColor(Color.FromArgb(179, 230, 169, 169)))) .Tooltip(t => t.Content("<b>{name}</b><br />{value:c}")) .DataLabel(dlb => dlb.Position(C1.Web.Mvc.Chart.LabelPosition.Center).Content("{name}")))@(Html.C1().TreeMap() .Binding("Sales") .BindingName("Category", "SubCategory") .Bind(Model) .Palette(colors.Select(ColorTranslator.FromHtml).ToList()) .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.Theming_Text0)</p> <p>@Html.Raw(Resources.TreeMap.Theming_Text1)</p>} |