使用Syncfusion图表的交互式功能为Xamarin.Forms应用程序增添趣味-控件新闻-慧都网

使用Syncfusion图表的交互式功能为Xamarin.Forms应用程序增添趣味

翻译|其它|编辑：陈津勇|2019-09-05 13:37:09.607|阅读 369 次

概述：本文主要讲述了Syncfusion Xamarin图表丰富的交互性特点。

查看原始数据并试图做出决策是非常乏味的，图表和图形等可视化表示则恰好克服了这个问题，这些可视化表示在交互支持的支持下非常容易理解。在这个博客中，小编将向大家介绍Syncfusion Xamarin图表的丰富和高度交互性的特性。它们是：

工具提示
选择
轨迹球
缩放和移动

它们以多种方式帮助用户理解数据，用户可以对数据的表示方式进行试验，以最佳的视觉效果回答有关数据的问题。下面，让我们来看看这些控件的交互功能吧~

点击下载Essential Studio for Xamarin试用版

工具提示

Syncfusion Xamarin Charts工具提示是控件最有价值的特性之一。用户可以轻松地自定义工具提示，这意味着我们可以定义额外的图表点信息、自定义默认外观、放置图像等等。所以,可能性几乎没有限制。

XAML

<chart:SfChart x:Name="chart"><font></font>
  <chart:SfChart.Resources><font></font>
     <ResourceDictionary><font></font>
            <DataTemplate x:Key="toolTipTemplate1"><font></font>
                <StackLayout BackgroundColor="#404041"> <font></font>
                    <Label Text="Franch" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="White" FontAttributes="Bold" FontFamily="Helvetica" Margin="0" FontSize="12" Grid.Row="0" /><font></font>
                    <BoxView Grid.Row="1" Color="White" HeightRequest="0.75" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" /><font></font>
                    <StackLayout Orientation="Horizontal"  VerticalOptions="FillAndExpand" BackgroundColor="#404041" Spacing="0" Padding="3" Margin="0"><font></font>
                        <Label Text="{Binding Value}" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand" TextColor="#CCCCCC" FontAttributes="Bold" FontFamily="Helvetica" FontSize="12" /><font></font>
                        <Label Text="{Binding Size,StringFormat=' :  {0}%'}" VerticalTextAlignment="Center" HorizontalOptions="EndAndExpand" TextColor="White" FontAttributes="Bold" FontFamily="Helvetica" Margin="0" FontSize="12" /><font></font>
                    </StackLayout><font></font>
                </StackLayout><font></font>
            </DataTemplate><font></font>
        </ResourceDictionary><font></font>
    </chart:SfChart.Resources><font></font>
    .....<font></font>
    .....<font></font>
    .....<font></font>
    <chart:SfChart.Series><font></font>
        <chart:LineSeries x:Name="lineSeries1" TooltipTemplate="{StaticResource toolTipTemplate1}"  StrokeWidth="3" ItemsSource="{Binding LineData1}" Color="#00BDAE" XBindingPath="Value" YBindingPath="Size" LegendIcon="Circle" Label="France" EnableTooltip="True"><font></font>
            <chart:LineSeries.DataMarker><font></font>
                <chart:ChartDataMarker  x:Name="marker" ShowMarker="True" MarkerColor="#00BDAE" MarkerBorderColor="White" ShowLabel="False" MarkerHeight="10" MarkerWidth="10" MarkerBorderWidth="2" /><font></font>
            </chart:LineSeries.DataMarker><font></font>
        </chart:LineSeries><font></font>
        <chart:LineSeries x:Name="lineSeries2" TooltipTemplate="{StaticResource toolTipTemplate1}"  StrokeWidth="3" ItemsSource="{Binding LineData2}" Color="#404041" XBindingPath="Value" YBindingPath="Size" Label="Germany" LegendIcon="Circle" EnableTooltip="True"><font></font>
            <chart:LineSeries.DataMarker><font></font>
                <chart:ChartDataMarker ShowMarker="True" MarkerColor="#404041" ShowLabel="False" MarkerBorderWidth="2" MarkerBorderColor="White" MarkerHeight="10" MarkerWidth="10" /><font></font>
            </chart:LineSeries.DataMarker><font></font>
        </chart:LineSeries><font></font>
    </chart:SfChart.Series><font></font>
</chart:SfChart><font></font>

△ 提示

选择

Xamarin图表突出显示数据点或系列。通过选择功能，我们可以实现向下钻取功能，以导航到有关所选数据点的另一页信息。

轨迹球

在Xamarin图表中，轨迹球类似于工具提示，在图表上显示为通过垂直或水平线连接到数据点的悬停标签。如果由于空间限制而无法显示所有数据点的数据标签，则此功能可用作数据标签功能的替代。一些轨迹球功能：

使用内置API自定义轨迹球视图的外观
标签模板
标签显示模式
轨迹球激活模式
多轨迹球支持

△ 轨迹球

缩放和平移

在绘制包含大量数据的Xamarin.Forms图表时，缩放和滚动对于数据可读性非常有用。通过捏合、选择区域或双击来执行缩放。可以通过在触摸屏上拖动手指来平移图表。以下是缩放和平移的一些有用方面：

自动滚动增量
缩放时自动间隔
最大缩放级别
Helper方法和事件

XAML

<chart:SfChart  x:Name="Chart"><font></font>
    <chart:SfChart.ChartBehaviors><font></font>
        <chart:ChartZoomPanBehavior EnablePanning="True" EnableZooming="True" EnableDoubleTap="true" EnableSelectionZooming="True" EnableDirectionalZooming="True" ZoomMode="XY" /><font></font>
    </chart:SfChart.ChartBehaviors><font></font>
            ....<font></font>
            ...<font></font>
            <font></font>
</chart:SfChart><font></font>