バージョン

項目ツールチップ レイヤー

トピックの概要

目的

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

前提条件

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

トピック 目的

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

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

このトピックの内容

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

概要

項目ツールチップ レイヤーの概要

ItemToolTipLayer は、特定のシリーズにタップしてホールドする場合に XamDataChart コントロール上のすべてのシリーズに関するヒントを個別に表示します。

ツールチップのスタイルはチャートから継承します。このプロパティの詳細は、以下のプロパティセクションを参照してください。

プレビュー

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

Item Tooltip Layer 3.png

プロパティ

項目ツールチップ レイヤーについて

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

プロパティ名 プロパティ タイプ 説明

Series

このプロパティは、どのシリーズに有効な項目ツールチップ レイヤーを設定するかを指定します。

各シリーズごとに別々の項目ツールチップ レイヤーを作成して個別に構成できます。

bool

このプロパティは、ツールチップの x 位置がグリッド ラインや中央スペースにスナップするのでなく補間されるべきであるかどうかを指定します。

以下のスクリーン ショットは、以下の設定の結果として、 ItemToolTipLayer オブジェクトの TargetSeries プロパティを持つ XamDataChart コントロールがどのように表示されるのかを示します。

プロパティ

series1

Item Tooltip Layer 4.png

以下のコードはこの実装で使用されます。

<ig:XamDataChart x:Name="theChart">
    <ig:XamDataChart.Axes>
        <ig:CategoryXAxis x:Name="xAxis"
                          ItemsSource="{Binding CategoryData1}"
                          Label="Category"/>
        <ig:NumericYAxis x:Name="yAxis"/>
    </ig:XamDataChart.Axes>
    <ig:XamDataChart.Series>
        <ig:ColumnSeries x:Name="series1"
                         ItemsSource="{Binding CategoryData1}"
                         ValueMemberPath="Value"
                         XAxis="{x:Reference xAxis}"
                         YAxis="{x:Reference yAxis}">
            <ig:ColumnSeries.ToolTipTemplate>
                <DataTemplate>
                    <Label Text="{Binding Item.Value}" FontSize="12" />
                </DataTemplate>
            </ig:ColumnSeries.ToolTipTemplate>
        </ig:ColumnSeries>
        <ig:LineSeries ItemsSource="{Binding CategoryData2}"
                       ValueMemberPath="Value"
                       XAxis="{x:Reference xAxis}"
                       YAxis="{x:Reference yAxis}">
            <ig:LineSeries.ToolTipTemplate>
                <DataTemplate>
                    <Label Text="{Binding Item.Value}" FontSize="12" />
                </DataTemplate>
            </ig:LineSeries.ToolTipTemplate>
        </ig:Lineseries>

        <ig:ItemToolTipLayer TargetSeries="{x:Reference series1}"/>
    </ig:XamDataChart.Series>
</ig:XamDataChart>

C# の場合:

var itemToolTipLayerSeries = new ItemToolTipLayer();
itemToolTipLayerSeries.TargetSeries = series1;
chart.Series.Add(itemToolTipLayerSeries);

関連コンテンツ

トピック 目的

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

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

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

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