Controls > FlexChart > Features > Hit Test |
The HitTest method is used to determine X and Y coordinates, as well as the index of a point on the FlexChart where the user taps. This method is helpful in scenarios such as displaying tooltips that lie outside the series of the FlexChart.
The following code examples demonstrate how to define the chart_Tapped event. This event invokes the HitTest() method to retrieve the information of the tapped point in the FlexChart region and displays it in the chart footer.
XAML |
Copy Code |
---|---|
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:c1="clr-namespace:C1.Xamarin.Forms.Chart; assembly=C1.Xamarin.Forms.Chart" x:Class="QuickstartChart.HitTest" Padding="10"> <StackLayout> <Grid VerticalOptions="FillAndExpand"> <c1:FlexChart x:Name="flexChart" Tapped="flexChart_Tapped" Header="Trigonometric functions" Footer="Cartesian coordinates" BindingX="X" ChartType="LineSymbols" LegendPosition="Bottom" > <c1:FlexChart.Series> <c1:ChartSeries x:Name="seriesCosX" Binding="Y" SeriesName="cos(x)" /> <c1:ChartSeries x:Name="seriesSinX" Binding="Y" SeriesName="sin(x)" /> </c1:FlexChart.Series> </c1:FlexChart> </Grid> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <StackLayout x:Name="stackHitTest" VerticalOptions="Fill"> <StackLayout Orientation="Horizontal"> <Label x:Name="lblChartElement" /> <Label Text="{Binding ChartElement}" /> </StackLayout> <StackLayout x:Name="stackSeries"> <StackLayout Orientation="Horizontal"> <Label x:Name="lblSeriesName" /> <Label Text="{Binding Series.SeriesName}" /> </StackLayout> <StackLayout x:Name="stackData"> <StackLayout Orientation="Horizontal"> <Label x:Name="lblPointIdx" /> <Label Text="{Binding PointIndex}" /> </StackLayout> <StackLayout Orientation="Horizontal" > <Label Text="{Binding X, StringFormat='X:{0:F2}'}" /> <Label Text="{Binding Y, StringFormat='Y:{0:F2}'}" /> </StackLayout> </StackLayout> </StackLayout> </StackLayout> </Grid> </StackLayout> |
C# |
Copy Code |
---|---|
public partial class HitTest : ContentPage { public HitTest() { InitializeComponent(); int len = 40; List<Point> listCosTuple = new List<Point>(); List<Point> listSinTuple = new List<Point>(); for (int i = 0; i < len; i++) { listCosTuple.Add(new Point(i, Math.Cos(0.12 * i))); listSinTuple.Add(new Point(i, Math.Sin(0.12 * i))); } this.flexChart.AxisY.Format = "n2"; this.seriesCosX.ItemsSource = listCosTuple; this.seriesSinX.ItemsSource = listSinTuple; } void flexChart_Tapped(object sender, C1.Xamarin.Forms.Core.C1TappedEventArgs e) { var hitTest = this.flexChart.HitTest(e.HitPoint); this.stackHitTest.BindingContext = hitTest; this.stackData.BindingContext = hitTest; this.stackSeries.IsVisible = hitTest != null && hitTest.Series != null; this.stackData.IsVisible = hitTest != null && hitTest.PointIndex != -1; } } |