FlexChart
FlexChart
項目フォーマッタ
機能
サンプル
説明
項目フォーマッタ
このビューは、FlexChart の ItemFormatter プロパティを使用して、データポイントの値に基づいてデータポイントの外観をカスタマイズする方法を示します。
この例で、ItemFormatter プロパティは、 チャートのレンダリングエンジンの Fill プロパティを、 プロットされるデータポイントの値に基づいて計算される値に設定する関数です。
ソース
ItemFormatterController.cs
using System; using MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexChartController : Controller { public ActionResult ItemFormatter() { return View(); } } }
ItemFormatter.cshtml
@{ var cos = new List<Dot>(); for (int i = 0; i < 300; i++) { cos.Add(new Dot { X = 0.16 * i, Y = Math.Cos(0.12 * i) }); } } @section Scripts{ <script type="text/javascript"> var itemFormatter = function (engine, hitTestInfo, defaultFormat) { if (hitTestInfo.chartElement == wijmo.chart.ChartElement.SeriesSymbol) { var y = hitTestInfo.y; var r = y >= 0 ? 255 : (255 * (1 + y)).toFixed(); var b = y < 0 ? 255 : (255 * (1 - y)).toFixed(); var g = ((1 - Math.abs(y)) * 255).toFixed(); engine.fill = 'rgb(' + r + ',' + g + ',' + b + ')'; defaultFormat(); } }; </script> } <c1-flex-chart id="HitTest" chart-type="LineSymbols" legend-position="None" item-formatter="itemFormatter"> <c1-flex-chart-series binding-x="X" binding="Y" name="cos(x)"> <c1-items-source source-collection="cos"></c1-items-source> </c1-flex-chart-series> </c1-flex-chart> @section Description{ <h3> @Html.Raw(FlexChartRes.ItemFormatter_ItemFormatter) </h3> <p>@Html.Raw(FlexChartRes.ItemFormatter_Text0)</p> <p>@Html.Raw(FlexChartRes.ItemFormatter_Text1)</p> }
マニュアル