FlexChart
FlexChart
BoxWhisker
機能
サンプル
設定
説明
通常、BoxWhisker 系列は、複数の数値データセット間の分布を比較するために使用されます。
ソース
BoxWhiskerController.cs
using System; using MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; using C1.Web.Mvc.Chart; namespace MvcExplorer.Controllers { public partial class FlexChartController : Controller { List<SalesAnalysis> _analysisData = SalesAnalysis.GetData(); public ActionResult BoxWhisker() { var width = new object[] { 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1 }; var boolValues = new object[] { false, true }; var settings = new ClientSettingsModel { Settings = new Dictionary<string, object[]> { {"GroupWidth", width}, {"GapWidth", width}, {"ShowMeanLine", boolValues}, {"ShowMeanMarker", boolValues}, {"ShowInnerPoints", boolValues}, {"ShowOutliers", boolValues}, {"Rotated", boolValues}, {"ShowLabel", boolValues}, {"QuartileCalculation", new object[]{QuartileCalculation.InclusiveMedian.ToString(), QuartileCalculation.ExclusiveMedian.ToString()}} }, DefaultValues = new Dictionary<string, object> { {"GapWidth", "0.1"}, {"GroupWidth", "0.8"} } }; settings.LoadRequestData(Request); ViewBag.DemoSettingsModel = settings; return View(_analysisData); } } }
BoxWhisker.cshtml
@model IEnumerable<SalesAnalysis> @{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; var showOutliers = demoSettingsModel.GetBool("ShowOutliers", false); var rotated = demoSettingsModel.GetBool("Rotated", false); } @section Scripts{ <script> function setProperty(control, property, value) { control.series.forEach(function (serie) { serie[property] = value; }); } function customChangeGroupWidth(control, value) { setProperty(control, 'groupWidth', value); } function customChangeGapWidth(control, value) { setProperty(control, 'gapWidth', value); } function customChangeShowMeanLine(control, value) { setProperty(control, 'showMeanLine', value); } function customChangeShowMeanMarker(control, value) { setProperty(control, 'showMeanMarker', value); } function customChangeShowInnerPoints(control, value) { setProperty(control, 'showInnerPoints', value); } function customChangeShowOutliers(control, value) { setProperty(control, 'showOutliers', value); } function customChangeRotated(control, value) { control.rotated = value; } function customChangeShowLabel(control, value) { control.dataLabel.content = value ? '{y}' : ''; } function customChangeQuartileCalculation(control, value) { setProperty(control, 'quartileCalculation', value); } </script> } <c1-flex-chart id="@demoSettingsModel.ControlId" binding="Downloads" binding-x="Country" height="300px" rotated="@rotated"> <c1-items-source source-collection="Model" /> <c1-flex-chart-boxwhisker name="Downloads" show-outliers="@showOutliers" /> <c1-flex-chart-boxwhisker binding="Sales" name="Sales" show-outliers="@showOutliers" /> <c1-flex-chart-boxwhisker binding="Queries" name="Queries" show-outliers="@showOutliers" /> </c1-flex-chart> @section Description{ <p>@Html.Raw(FlexChartRes.BoxWhisker_Text0)</p> }
マニュアル