亚洲日韩国产成人另类,欧美片一区,中国久久

使用Syncfusion圖表的交互式功能為Xamarin.Forms應用程序增添趣味

翻譯|其它|編輯：陳津勇|2019-09-05 13:37:09.607|閱讀 404 次

概述：本文主要講述了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>