Sunburst
選択
機能
サンプル
設定
説明
Sunburst チャートコントロールを使用すると、Sunburst グラフセグメントをクリックまたはタッチしてデータポイントを選択できます。SelectionMode プロパティを使用して、データポイントによる選択を可能にするか、または何も選択しないか(デフォルト)を指定できます。
SelectionMode プロパティを Point に設定すると、Sunburst は、ユーザーが Sunburst グラフセグメントをクリックしたときに Selection プロパティを更新し、 選択された要素に「wj-state-selected」クラスを適用します。Sunburst の SelectionMode プロパティを Series または None に設定すると、コントロール内の選択内容が無効になります。
Sunburst チャートには、選択内容をカスタマイズするための 3 つの追加プロパティが用意されています。
- SelectedItemOffset: コントロールの中央から、選択された Sunburst グラフセグメントまでのオフセットを指定します。
- SelectedItemPosition: 選択した Sunburst グラフセグメントの位置を指定します。使用できるオプションは、Top、Bottom、 Left、Right、および None(デフォルト)です。
- IsAnimated: 選択内容をアニメーション表示するかどうかを決定します。
ソース
SelectionController.cs
using System; using System.Collections.Generic; using System.Web.Mvc; using C1.Web.Mvc.Chart; using MvcExplorer.Models; using System.Linq; namespace MvcExplorer.Controllers { public partial class SunburstController : Controller { public ActionResult Selection() { ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = new Dictionary<string, object[]> { {"SelectionMode", Enum.GetValues(typeof(SelectionMode)).Cast<object>().ToArray()}, {"SelectedItemPosition", Enum.GetValues(typeof(Position)).Cast<object>().ToArray()}, {"SelectedItemOffset", new object[] {0, 0.1, 0.2, 0.3, 0.4, 0.5}}, {"IsAnimated", new object[] {false, true}} } }; return View(_data); } } }
Selection.cshtml
@using C1.Web.Mvc.Chart @model IEnumerable<HierarchicalData> @{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; } @(Html.C1().Sunburst<HierarchicalData>() .Id(demoSettingsModel.ControlId) .Bind("Year", "Value", Model) .DataLabel(dl => dl.Content("{name}").Position(PieLabelPosition.Center)) .BindingName("Year, Quarter, Month")) @section Description{ <p>@Html.Raw(Resources.Sunburst.Selection_Text0)</p> <p>@Html.Raw(Resources.Sunburst.Selection_Text1)</p> <p>@Html.Raw(Resources.Sunburst.Selection_Text2)</p> <ul> <li>@Html.Raw(Resources.Sunburst.Selection_Li1)</li> <li>@Html.Raw(Resources.Sunburst.Selection_Li2)</li> <li>@Html.Raw(Resources.Sunburst.Selection_Li3)</li> </ul> }
マニュアル