FlexChart
FlexChart
BoxWhisker
機能
サンプル
設定
説明
BoxWhisker 系列は、複数の数値データセット間の分布を比較するために使用されます。
ソース
BoxWhiskerController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcExplorer.Models; 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", Enum.GetValues(typeof(C1.Web.Mvc.Chart.QuartileCalculation)).Cast<object>().ToArray()} }, 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> @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> } @{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; var showOutliers = demoSettingsModel.GetBool("ShowOutliers", false); } @(Html.C1().FlexChart() .Id(demoSettingsModel.ControlId) .Rotated(demoSettingsModel.GetBool("Rotated", false)) .Bind("Country", "Downloads", Model) .Series(ser => { ser.AddBoxWhisker().Name("Downloads").ShowOutliers(showOutliers); ser.AddBoxWhisker().Binding("Sales").Name("Sales").ShowOutliers(showOutliers); ser.AddBoxWhisker().Binding("Queries").Name("Queries").ShowOutliers(showOutliers); }) ) @section Description{ <p>@Html.Raw(Resources.FlexChart.BoxWhisker_Text0)</p> }
マニュアル