Sunburst
選択
機能
サンプル
設定
説明
Sunburst チャートコントロールを使用すると、Sunburst グラフセグメントをクリックまたはタッチしてデータポイントを選択できます。selection-mode 属性を使用して、データポイントによる選択を可能にするか、または何も選択しないか（デフォルト）を指定できます。
selection-mode 属性を Point に設定すると、Sunburst は、ユーザーが Sunburst グラフセグメントをクリックしたときに selection 属性を更新し、 選択された要素に「wj-state-selected」クラスを適用します。Sunburst の selection-mode プロパティを Series または None に設定すると、コントロール内の選択内容が無効になります。
Sunburst チャートには、選択内容をカスタマイズするための 3 つの追加プロパティが用意されています。
- selected-item-offset: コントロールの中央から、選択された Sunburst グラフセグメントまでのオフセットを指定します。
- selected-item-position: 選択した Sunburst グラフセグメントの位置を指定します。使用できるオプションは、Top、Bottom、 Left、Right、および None（デフォルト）です。
- is-animated: 選択内容をアニメーション表示するかどうかを決定します。
ソース
SelectionController.cs
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);
}
}
}
Selection.cshtml
@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>
}
マニュアル