Sunburst
凡例とタイトル
機能
サンプル
設定
説明
legend-position 属性を使用すると、チャートの凡例の外観をカスタマイズできます。 header 属性と footer 属性を使用すると、Sunburst チャートコントロールにタイトルを追加できます。 c1-flex-chart-title-style タグを使用すると、ヘッダーとフッターにスタイルを適用できます。
次の例では、Sunburst の凡例の位置、および ヘッダーとフッターの外観を変更できます。
ソース
LegendAndTitlesController.cs
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);
}
}
}
LegendAndTitles.cshtml
@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>
}
マニュアル