FlexChart
FlexChart
Item Formatter
Item Formatter
This view demonstrates how you can use the FlexChart's ItemFormatter
property to customize the appearance of the data points based on their values.
Features
Description
Item Formatter
This view demonstrates how you can use the FlexChart's ItemFormatter property to customize the appearance of the data points based on their values.
In this example, the ItemFormatter property is a function that sets the fill property of the chart's rendering engine to a value calculated based on the value of the data point being plotted.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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 ItemFormatter() { return View(); } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | @{ List<Dot> 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>}<div id="HitTest" style="height: 300px"></div>@(Html.C1().FlexChart("#HitTest").ChartType(C1.Web.Mvc.Chart.ChartType.LineSymbols).Series(sers => { sers.Add().Bind(cos).BindingX("X").Binding("Y").Name("cos(x)"); }).Legend(C1.Web.Mvc.Chart.Position.None).ItemFormatter("itemFormatter"))@section Description{ <h3> @Html.Raw(Resources.FlexChart.ItemFormatter_ItemFormatter) </h3> <p>@Html.Raw(Resources.FlexChart.ItemFormatter_Text0)</p> <p>@Html.Raw(Resources.FlexChart.ItemFormatter_Text1)</p>} |