FlexChart
FlexChart
ゾーン
機能
サンプル
説明
Zones
このビューは、学生の成績の散布図を作成し、ゾーンを使用して各成績範囲を強調表示します。
FlexChart の OnClientRendering プロパティにクライアント関数名を設定すると、 クライアント側の FlexChart の Rendering イベントでゾーンが描画されます。
ソース
ZonesController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcExplorer.Models; using C1.Web.Mvc; using C1.Web.Mvc.Serialization; namespace MvcExplorer.Controllers { public partial class FlexChartController : Controller { public ActionResult Zones() { List<Dot> studentPoints = new List<Dot>(); var nStudents = 200; var nMaxPoints = 1600; var rand = new Random(0); for (int i = 0; i < nStudents; i++) { studentPoints.Add(new Dot { X = i, Y = nMaxPoints * 0.5 * (1 + rand.Next(0, 10)) }); } ViewBag.studentPoints = studentPoints; List<List<Dot>> lineSeriesDataList = new List<List<Dot>>() { }; double mean = FindMean(studentPoints); double stdDev = FindStdDev(studentPoints, mean); for (int i = -2; i <= 2; i++) { double y = mean + i * stdDev; List<Dot> seriesData = new List<Dot>() { new Dot { X = 0, Y = y }, new Dot { X = nStudents - 1, Y = y } }; lineSeriesDataList.Add(seriesData); } ViewBag.lineSeriesDataList = lineSeriesDataList; ViewBag.colors = new List<string>() { "rgba(255,192,192,0.2)", "rgba(55,328,228,0.5)", "rgba(255,228,128,0.5)", "rgba(128,255,128,0.5)", "rgba(128,128,225,0.5)" }; List<double> yDatas = new List<double>() { }; for (int i = 0; i < studentPoints.Count; i++) { yDatas.Add(studentPoints[i].Y); } yDatas.Sort(); List<double> zones = new List<double>() { yDatas[GetBoundingIndex(yDatas, 0.05)], yDatas[GetBoundingIndex(yDatas, 0.25)], yDatas[GetBoundingIndex(yDatas, 0.75)], yDatas[GetBoundingIndex(yDatas, 0.95)] }; ViewBag.zones = zones; return View(); } private double FindMean(List<Dot> points) { double sum = 0; for (var i = 0; i < points.Count; i++) { sum += points[i].Y; } return sum / points.Count; } private double FindStdDev(List<Dot> points, double mean) { double sum = 0; for (var i = 0; i < points.Count; i++) { double d = points[i].Y - mean; sum += d * d; } return Math.Sqrt(sum / points.Count); } private int GetBoundingIndex(List<double> points, double frac) { double n = points.Count; int i = (int)Math.Ceiling(n * frac); while (i > points[0] && points[i] == points[i+1]) i--; return i; } } }
Zones.cshtml
@using C1.Web.Mvc.Chart @{ List<Dot> studentPoints = ViewBag.studentPoints; List<List<Dot>> lineSeriesDataList = ViewBag.lineSeriesDataList; List<string> colors = ViewBag.colors; List<double> zones = ViewBag.zones; } @section Scripts{ <script type="text/javascript"> function drawAlarmZone(chart, engine, xmin, ymin, xmax, ymax, fill) { var pt1 = chart.dataToPoint(new wijmo.Point(xmin, ymin)); var pt2 = chart.dataToPoint(new wijmo.Point(xmax, ymax)); engine.fill = fill; engine.drawRect(Math.min(pt1.x, pt2.x), Math.min(pt1.y, pt2.y), Math.abs(pt2.x - pt1.x), Math.abs(pt2.y - pt1.y)); } var zones = [ @zones[0], @zones[1], @zones[2], @zones[3], ]; var chartRendering, colors = ["rgba(255,192,192,0.2)", "rgba(55,328,228,0.5)", "rgba(255,228,128,0.5)", "rgba(128,255,128,0.5)", "rgba(128,128,225,0.5)"]; chartRendering = function (sender, e) { for (var i = 0; i < 5; i++) { var ymin = i == 0 ? sender.axisY.actualMin : zones[i - 1]; var ymax = i == 4 ? sender.axisY.actualMax : zones[i]; drawAlarmZone(sender, e.engine, sender.axisX.actualMin, ymin, sender.axisX.actualMax, ymax, colors[i]); } } </script> } <div id="flexChart"></div> @(Html.C1().FlexChart("#flexChart").Bind("X", studentPoints).ChartType(ChartType.Scatter).Series(sers => { sers.Add().Binding("Y").Name("raw score").SymbolSize(6); sers.Add().Bind("X", "Y", lineSeriesDataList[0]).ChartType(ChartType.Line).Name("m-2s").Style(s => s.Stroke("#202020").StrokeWidth(2).StrokeDasharray("2,2")); sers.Add().Bind("X", "Y", lineSeriesDataList[1]).ChartType(ChartType.Line).Name("m-1s").Style(s => s.Stroke("#202020").StrokeWidth(2).StrokeDasharray("5,1")); sers.Add().Bind("X", "Y", lineSeriesDataList[2]).ChartType(ChartType.Line).Name("mean").Style(s => s.Stroke("#202020").StrokeWidth(2)); sers.Add().Bind("X", "Y", lineSeriesDataList[3]).ChartType(ChartType.Line).Name("m+1s").Style(s => s.Stroke("#202020").StrokeWidth(2).StrokeDasharray("5,1")); sers.Add().Bind("X", "Y", lineSeriesDataList[4]).ChartType(ChartType.Line).Name("m+2s").Style(s => s.Stroke("#202020").StrokeWidth(2).StrokeDasharray("2,2")); sers.Add().ChartType(ChartType.Area).Name("A").Style(s => s.Fill(colors[4]).Stroke("transparent")); sers.Add().ChartType(ChartType.Area).Name("B").Style(s => s.Fill(colors[3]).Stroke("transparent")); sers.Add().ChartType(ChartType.Area).Name("C").Style(s => s.Fill(colors[2]).Stroke("transparent")); sers.Add().ChartType(ChartType.Area).Name("D").Style(s => s.Fill(colors[1]).Stroke("transparent")); sers.Add().ChartType(ChartType.Area).Name("E").Style(s => s.Fill(colors[0]).Stroke("transparent")); }).OnClientRendering("chartRendering")) @section Description{ <h3> Zones </h3> <p>@Html.Raw(Resources.FlexChart.Zones_Text0)</p> <p>@Html.Raw(Resources.FlexChart.Zones_Text1)</p> }
マニュアル