バージョン

コールアウト レイヤー

トピックの概要

目的

このトピックは、タッチ操作に使用されるコールアウト レイヤーについての情報を提供します。コールアウト レイヤーのプロパティについて説明し、実装例を提供します。

前提条件

本トピックの理解を深めるために、以下のトピックを参照することをお勧めします。

トピック 目的

XamDataChart コントロールは、コントロールの DataContext プロパティにマップされるデータ オブジェクト モデルを必要とします。ここでは、単純なデータ オブジェクト モデルを提供しますが、自分自身で作成して、代わりにこのサンプル コードと使用することができます。

このトピックは、XamDataChart コントロールのカテゴリ シリーズのさまざまなタイプを説明します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

概要

コールアウト レイヤーの概要

CalloutLayer は XamDataChart コントロールに既存または新しいデータからの注釈を表示します。注釈はデータ ソースのデータ値の横に表示されます。

コールアウト レイヤーは XamDataChart のすべてのシリーズ タイプで使用されることをサポートします。

ユーザーに注目させるデータポイントの詳細またはノートなどの追加情報のためにコールアウト注釈を使用します。

別の構成を持つ複数のコールアウト レイヤーが必要な場合、特別なシリーズを対象とするコールアウトを構成できます。これは TargetSeries プロパティで設定できます。

プレビュー

以下の画像は、CalloutLayer を追加した XamDataChart コントロールのプレビューです。

datachart calloutlayer xamarin.png

プロパティ

コールアウト レイヤーのまとめ

以下の表で、CalloutLayer レイヤーのプロパティを簡単に説明します。

プロパティ名 プロパティ型 説明

String

チャートの注釈に表示される項目のためのデータ ソースでのメンバー パス。

String

注釈の x 値のためのデータ ソースでのメンバー パス。

String

注釈の y 値のためのデータ ソースでのメンバー パス。

Boolean

コールアウトは競合の解決に基づいてオフセットされる場合、true に設定します。デフォルトで True。

例

以下のコードは上記の例を実装します。

XAML の場合:

<ig:XamDataChart x:Name="DataChart" IsHorizontalZoomEnabled="True" IsVerticalZoomEnabled="True" >
    <ig:XamDataChart.Axes>
        <ig:CategoryXAxis x:Name="xAxis" ItemsSource="{Binding USA}" Label="Year" Interval="1"/>
        <ig:NumericYAxis x:Name="yAxis" MinimumValue="0" Title="Population (M)" LabelLocation="OutsideRight"/>
    </ig:XamDataChart.Axes>
    <ig:XamDataChart.Series>
        <ig:LineSeries ValueMemberPath="ValueInMln" x:Name="SeriesUSA"
                           BindingContext="{Binding USA}"
                           ItemsSource="{Binding}"
                           Title="{Binding Country}"
                           XAxis="{x:Reference xAxis}"
                           YAxis="{x:Reference yAxis}" >
        </ig:LineSeries>
        <ig:LineSeries ValueMemberPath="ValueInMln" x:Name="SeriesRUS"
                           BindingContext="{Binding RUS}"
                           ItemsSource="{Binding}"
                           Title="{Binding Country}"
                           XAxis="{x:Reference xAxis}"
                           YAxis="{x:Reference yAxis}" >
        </ig:LineSeries>
        <!-- these two callout layers are targeting ItemsSource for each series: -->
        <ig:CalloutLayer
                CollisionChannel="MultipleCallouts"
                TargetSeries="{x:Reference SeriesUSA}"
                ItemsSource="{Binding CalloutsUSA}"
                IsAutoCalloutBehaviorEnabled="False"
                UseValueForAutoCalloutLabels="False"
                XMemberPath="DataItem.Index"
                YMemberPath="DataItem.ValueInMln"
                LabelMemberPath="Label"
                ContentMemberPath="Content"
                CalloutLeaderBrush="{Binding Source={x:Reference SeriesUSA}, Path=Brush}"
                CalloutOutline="{Binding Source={x:Reference SeriesUSA}, Path=Brush}"
                CalloutBackground="{Binding Source={x:Reference SeriesUSA}, Path=Brush}"
                CalloutTextColor="White"
                CalloutStrokeThickness="1.5">
        </ig:CalloutLayer>
        <ig:CalloutLayer
                CollisionChannel="MultipleCallouts"
                TargetSeries="{x:Reference SeriesRUS}"
                ItemsSource="{Binding CalloutsRUS}"
                IsAutoCalloutBehaviorEnabled="False"
                UseValueForAutoCalloutLabels="False"
                AutoCalloutLabelPrecision="1"
                XMemberPath="DataItem.Index"
                YMemberPath="DataItem.ValueInMln"
                LabelMemberPath="Label"
                ContentMemberPath="Content"
                CalloutLeaderBrush="{Binding Source={x:Reference SeriesRUS}, Path=Brush}"
                CalloutOutline="{Binding Source={x:Reference SeriesRUS}, Path=Brush}"
                CalloutBackground="{Binding Source={x:Reference SeriesRUS}, Path=Brush}"
                CalloutTextColor="White"
                CalloutStrokeThickness="1.5">
        </ig:CalloutLayer>
    </ig:XamDataChart.Series>
</ig:XamDataChart>
トピック 目的

このトピックは、タッチ操作機能が、Series クラスから継承したツールチップの相互作用を強調表示、タッチおよび相互作用するために使用するプロパティおよびメソッドについての情報を提供します。

このトピックは、pick:[xamarin="タッチ」]操作に使用される十字線 レイヤーについての情報を提供します。十字線のプロパティについて説明し、実装例を示します。

このトピックは、タッチ操作に使用される項目強調表示線 レイヤーについての情報を提供します。カテゴリ項目強調表示レイヤーのプロパティについて説明し、実装例を示します。

このトピックは、タッチ操作に使用されるカテゴリ ツールチップ レイヤーについての情報を提供します。

このトピックは、タッチ操作に使用される項目ツールチップ線 レイヤーについての情報を提供します。項目ツールチップ レイヤーのプロパティについて説明し、実装例も提供します。