FlexChart
FlexChart
ErrorBar
機能
サンプル
設定
説明
ErrorBar を使用すると、誤差の範囲や標準偏差を一目で確認することができます。これらは、標準誤差量、パーセント値、または標準偏差として表示することができます。必要に応じて、正確な誤差量を表示するために独自の値を設定することもできます。
ソース
ErrorBarController.cs
using System; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; using C1.Web.Mvc.Chart; namespace MvcExplorer.Controllers { public partial class FlexChartController : Controller { List<PopulationByCountry> _populationByCountry = PopulationByCountry.GetData(); public ActionResult ErrorBar() { var settings = new ClientSettingsModel { Settings = new Dictionary<string, object[]> { {"Direction", new object[] { ErrorBarDirection.Both, ErrorBarDirection.Minus, ErrorBarDirection.Plus } }, {"ErrorAmount", new object[] { ErrorAmount.FixedValue, ErrorAmount.Custom, ErrorAmount.Percentage, ErrorAmount.StandardDeviation, ErrorAmount.StandardError } }, {"Value", new object[] { 50, 100, 150, 200 } }, {"EndStyle", new object[] { ErrorBarEndStyle.Cap, ErrorBarEndStyle.NoCap } } } }; settings.LoadRequestData(Request); ViewBag.DemoSettingsModel = settings; return View(_populationByCountry); } } }
ErrorBar.cshtml
@model IEnumerable<PopulationByCountry> @section Scripts{ <script> function setProperty(control, property, value) { control.series.forEach(function (serie) { serie[property] = value; }); } function customChangeDirection(control, value) { setProperty(control, 'direction', value); } function customChangeErrorAmount(control, value) { setProperty(control, 'errorAmount', value); } function customChangeValue(control, value) { setProperty(control, 'value', value); } function customChangeEndStyle(control, value) { setProperty(control, 'endStyle', value); } </script> } @{ var errorBarStyle = new SVGStyle { Fill = "#e6e6e6", Stroke = "#918254", StrokeWidth = 2 }; } @{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; var errorAmount = demoSettingsModel.GetEnum("ErrorAmount", C1.Web.Mvc.Chart.ErrorAmount.FixedValue); } <c1-flex-chart id="@demoSettingsModel.ControlId" binding="Population" binding-x="Country" height="300px"> <c1-items-source source-collection="Model" /> <c1-flex-chart-error-bar name="Population" value="50" error-bar-style="@errorBarStyle" error-amount="@errorAmount" /> </c1-flex-chart> @section Description{ <p>@Html.Raw(FlexChartRes.ErrorBar_Text0)</p> }
マニュアル