バージョン

コールアウト レイヤー

トピックの概要

目的

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

前提条件

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

トピック 目的

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

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

このトピックの内容

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

概要

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

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

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

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

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

プレビュー

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

datachart calloutlayer wpf.png

プロパティ

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

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

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

String

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

String

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

String

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

Boolean

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

例

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

XAML の場合:

<ig:XamDataChart x:Name="DataChart" Grid.Column="1"
                 HorizontalZoomable="True"
                 VerticalZoomable="True"
                 DataContext="{StaticResource VM}" >
    <ig:XamDataChart.Axes>
        <ig:CategoryXAxis x:Name="XAxis" ItemsSource="{Binding USA}"
                          Label="{}{Year}"  Interval="1"/>
        <ig:NumericYAxis x:Name="YAxis" MinimumValue="0" Label="{}{} M"
                         Title="{Binding XWDC_WorldData_Types_Population, Source={StaticResource Strings}}">
            <ig:NumericYAxis.LabelSettings>
                <ig:AxisLabelSettings Location="OutsideRight" Margin="5 0 5 0" />
            </ig:NumericYAxis.LabelSettings>
        </ig:NumericYAxis>
    </ig:XamDataChart.Axes>
    <ig:XamDataChart.Series>
        <ig:LineSeries ValueMemberPath="ValueInMln"
                       DataContext="{Binding USA}"
                       ItemsSource="{Binding}"
                       Title="{Binding Country}"
                       XAxis="{Binding ElementName=XAxis}"
                       YAxis="{Binding ElementName=YAxis}" >
        </ig:LineSeries>
        <ig:LineSeries ValueMemberPath="ValueInMln"
                       DataContext="{Binding RUS}"
                       ItemsSource="{Binding}"
                       Title="{Binding Country}"
                       XAxis="{Binding ElementName=XAxis}"
                       YAxis="{Binding ElementName=YAxis}" >
        </ig:LineSeries>
        <!-- this single callout layer is targeting ItemsSource of multiple series: -->
        <ig:CalloutLayer x:Name="AutoCallout"
                         IsAutoCalloutBehaviorEnabled="True"
                         UseValueForAutoCalloutLabels="True"
                         AutoCalloutLabelPrecision="1"
                         XMemberPath="Index"
                         YMemberPath="ValueInMln"
                         LabelMemberPath="ChangePercentage"
                         CalloutLeaderBrush="Gray"
                         CalloutOutline="Gray"
                         CalloutBackground="DodgerBlue"
                         CalloutTextColor="White"
                         CalloutStrokeThickness="1.5">
        </ig:CalloutLayer>
    </ig:XamDataChart.Series>
</ig:XamDataChart>

C# の場合:

var callout = new CalloutLayer();
callout.IsAutoCalloutBehaviorEnabled = true;
callout.UseValueForAutoCalloutLabels = true;
callout.AutoCalloutLabelPrecision = 1;
callout.XMemberPath = "Index";
callout.YMemberPath = "ValueInMln";
callout.LabelMemberPath = "ChangePercentage";
callout.CalloutLeaderBrush = new SolidColorBrush(Colors.Gray);
callout.CalloutOutline = new SolidColorBrush(Colors.Gray);
callout.CalloutBackground = new SolidColorBrush(Colors.DodgerBlue);
callout.CalloutTextColor = new SolidColorBrush(Colors.White);
callout.CalloutStrokeThickness = 1.5;
DataChart.Series.Add(callout);
トピック 目的

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

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

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

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

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