Sunburst
Sunburst
Legend and Titles
The legend-position attribute can be used to customize the appearance of the chart's legend.
Features
Settings
Legend Position: None
Header: Header
Footer: Footer
Description
The legend-position attribute can be used to customize the appearance of the chart's legend.
The header and footer attributes can be used to add titles to the Sunburst chart control.
c1-flex-chart-title-style tag can be used to apply the style to header and footer.
The following example allows you to change the Sunburst's legend postion, and the appearance of the header and footer.
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 | using Microsoft.AspNetCore.Mvc; using System.Collections.Generic; using MvcExplorer.Models; using C1.Web.Mvc.Chart; using System; namespace MvcExplorer.Controllers { public partial class SunburstController : Controller { public ActionResult LegendAndTitles() { ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = new Dictionary<string, object[]> { {"Legend.Position", new object[] { Position.None, Position.Left, Position.Top, Position.Right, Position.Bottom}}, {"Header", new object[] {"Header", "ヘッダー"}}, {"Footer", new object[] {"Footer", "フッター"}} } }; return View(_data); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | @using C1.Web.Mvc.Chart @model IEnumerable<HierarchicalData> @{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; } <c1-sunburst id="@demoSettingsModel.ControlId" legend-position="None" header="Header" footer="Footer" binding-name="Year, Quarter, Month" binding="Value"> <c1-items-source source-collection="Model"></c1-items-source> <c1-flex-pie-datalabel content="{name}" position="Center"></c1-flex-pie-datalabel> <c1-flex-chart-title-style c1-property="HeaderStyle" font-family="Arial" /> </c1-sunburst> @section Description{ <p>@Html.Raw(SunburstRes.LegendAndTitles_Text0)</p> <p>@Html.Raw(SunburstRes.LegendAndTitles_Text1)</p> } |