TreeMap
TreeMap
Theming
Features
Sample
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.
Source
ThemingController.cs
using MvcExplorer.Models;
using System.Web.Mvc;
namespace MvcExplorer.Controllers
{
public partial class TreeMapController : Controller
{
// GET: Theming
public ActionResult Theming()
{
return View(FoodSale.GetDate());
}
}
}
Theming.cshtml
@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>
}
Documentation