FlexRadar
レーダー
機能
サンプル
設定
説明
この例は、FlexRadar チャートを作成してカスタマイズする方法を示します。
ソース
IndexController.cs
using MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexRadarController : Controller { private List<ProductSales> productSales = ProductSales.GetData(); public ActionResult Index() { var settings = new ClientSettingsModel { Settings = CreateRadarSettings(), DefaultValues = GetIndexDefaultValues() }; settings.LoadRequestData(Request); ViewBag.DemoSettingsModel = settings; return View(productSales); } private static IDictionary<string, object[]> CreateRadarSettings() { var settings = new Dictionary<string, object[]> { {"ChartType", new object[]{"Column", "Scatter", "Line", "LineSymbols", "Area"}}, {"Stacking", new object[]{"None", "Stacked", "Stacked100pc"}}, {"StartAngle", new object[]{0, 60, 120, 180, 240, 300, 360}}, {"TotalAngle", new object[]{60, 120, 180, 240, 300, 360}}, {"Reversed", new object[]{false, true}} }; return settings; } private static IDictionary<string, object> GetIndexDefaultValues() { var defaultValues = new Dictionary<string, object> { {"TotalAngle", 360} }; return defaultValues; } } }
Index.cshtml
@model IEnumerable<ProductSales> @using C1.Web.Mvc.Chart @{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; var chartType = demoSettingsModel.GetEnum("ChartType", C1.Web.Mvc.Chart.RadarChartType.Column); var stacking = demoSettingsModel.GetEnum("Stacking", C1.Web.Mvc.Chart.Stacking.None); } <c1-flex-radar binding="Downloads" binding-x="Country" height="400px" width="500px" chart-type="@chartType" stacking="@stacking" id="@demoSettingsModel.ControlId" legend-position="Top"> <c1-items-source source-collection="Model" /> <c1-flex-radar-series name="Downloads" /> <c1-flex-radar-series name="Sales" binding="Sales" /> </c1-flex-radar> @section Description{ <p>@Html.Raw(FlexRadarRes.Index_Text0)</p> }
マニュアル