FlexChart
FlexChart
Hit Test
Hit Test
This view demonstrates the use of the FlexChart's hitTest method in client-side
The hitTest method takes a point and returns the nearest chart element.
Features
Description
Hit Test
This view demonstrates the use of the FlexChart's hitTest method in client-side
The hitTest method takes a point and returns the nearest chart element. It can be used to provide interactive features such as clickable regions, drill-downs, etc.
Move mouse over chart to see information about the chart element that is closest to the mouse.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | using System; using MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexChartController : Controller { public ActionResult HitTest() { 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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | @{ ViewBag.Title = "SeriesBinding"; List<Dot> cos = new List<Dot>(); List<Dot> sin = new List<Dot>(); for (int i = 0; i < 60; i++) { cos.Add(new Dot { X = i, Y = Math.Cos(0.12 * i) }); sin.Add(new Dot { X = i, Y = Math.Sin(0.12 * i) }); } } <div id="HitTest" style="height: 300px"></div> <c1-flex-chart id="HitTest" chart-type="LineSymbols"> <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-series binding-x="X" binding="Y" name="sin(x)"> <c1-items-source source-collection="sin"></c1-items-source> </c1-flex-chart-series> </c1-flex-chart> <div style="height: 110px"> <div id="info"></div> </div> @section Scripts{ <script type="text/javascript"> c1.documentReady(function () { var chart = wijmo.Control.getControl("#HitTest"), formatHitInfo = function (hitInfo, pt) { var s = '<div>Chart element: ' + wijmo.chart.ChartElement[hitInfo.chartElement] + '</div>'; if (hitInfo.series) { s += '<div>@(FlexChartRes.HitTest_SeriesName) ' + hitInfo.series.name; if (hitInfo.pointIndex !== null && hitInfo.pointIndex !== undefined) { s += '<div>@(FlexChartRes.HitTest_PointIndex) ' + hitInfo.pointIndex + '</div>'; s += '<div>Distance: ' + hitInfo.distance.toFixed(0) + '</div>'; if (hitInfo.chartElement == wijmo.chart.ChartElement.PlotArea) { s += '<div>x: ' + pt.x.toFixed(2) + '</div>'; s += '<div>y: ' + pt.y.toFixed(2) + '</div>'; } } } return s; }; chart.hostElement.onmousemove = function (e) { var hit = chart.hitTest(e); var info = document.getElementById("info"); info.innerHTML = formatHitInfo(hit, chart.pointToData(e)); }; }); </script>} @section Description{ <h3>@Html.Raw(FlexChartRes.HitTest_HitTest)</h3> <p>@Html.Raw(FlexChartRes.HitTest_Text0)</p> <p>@Html.Raw(FlexChartRes.HitTest_Text1)</p> <p>@Html.Raw(FlexChartRes.HitTest_Text2)</p> } |