Sunburst
Sunburst
Selection
The Sunburst chart control allows you to select data points by clicking or touching a sunburst slice.
Features
Settings
Selection Mode: None
Selected Item Position: None
Selected Item Offset: 0
Is Animated: False
Description
The Sunburst chart control allows you to select data points by clicking or touching a sunburst slice. Use the selection-mode attribute to specify whether you want to allow selection by data point or no selection at all (default).
Setting the selection-mode attribute to Point causes the Sunburst to update the selection attribute when the user clicks on a sunburst slice, and to apply the "wj-state-selected" class to the selected element. Setting the Sunburst's selection-mode property to Series or None will disable selections within the control.
The Sunburst chart offers three additional properties to customize the selection:
- selected-item-offset: Specifies the offset of the selected sunburst slice from the center of the control.
- selected-item-position: Specifies the position of the selected sunburst slice. The available options are Top, Bottom, Left, Right, and None (default).
- is-animated: Determines whether or not to animate the selection.
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 | using C1.Web.Mvc.Chart; using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; using System; using System.Collections.Generic; namespace MvcExplorer.Controllers { public partial class SunburstController : Controller { public ActionResult Selection() { ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = new Dictionary<string, object[]> { {"SelectionMode", new object[] {SelectionMode.None, SelectionMode.Point, SelectionMode.Series }}, {"SelectedItemPosition", new object[] { Position.None, Position.Left, Position.Top, Position.Right, Position.Bottom, Position.Auto }}, {"SelectedItemOffset", new object[] {0, 0.1, 0.2, 0.3, 0.4, 0.5}}, {"IsAnimated", new object[] {false, true}} } }; return View(_data); } } } |
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 | @using C1.Web.Mvc.Chart @model IEnumerable<HierarchicalData> @{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; } <c1-sunburst id="@demoSettingsModel.ControlId" header="Sales" is-animated="false" selection-mode="None" selected-item-offset="0" selected-item-position="None" 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-sunburst> @section Description{ <p>@Html.Raw(SunburstRes.Selection_Text0)</p> <p>@Html.Raw(SunburstRes.Selection_Text1)</p> <p>@Html.Raw(SunburstRes.Selection_Text2)</p> <ul> <li> @Html.Raw(SunburstRes.Selection_Li3) </li> <li>@Html.Raw(SunburstRes.Selection_Li1)</li> <li>@Html.Raw(SunburstRes.Selection_Li2)</li> </ul> } |