バージョン

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

トピックの概要

目的

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

前提条件

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

トピック 目的

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

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

このトピックの内容

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

概要

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

ItemToolTipLayer は、特定のシリーズにマウスがホバーする場合に XamDataChart コントロール上のすべてのシリーズに関するヒントを個別に表示します。

ツールチップのスタイルはチャートから継承しますが、このデフォルトのビヘイビアーは ToolTipStyle プロパティを設定することにより上書きできます。このプロパティの詳細は、以下のプロパティセクションを参照してください。

プレビュー

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

Item Tooltip Layer 1.png

プロパティ

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

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

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

Series

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

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

Style

このプロパティは、表示されるヒントに適用するスタイルを指定します。デフォルトではツールチップはチャートからスタイルを継承しますが、このプロパティを設定するとこのデフォルト設定を上書きできます。

Style

このプロパティは、ヒントのポインター エリアに適用するスタイルを指定します。

bool

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

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

プロパティ

series1

Item Tooltip Layer 2.png

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

XAML の場合:

<ig:XamDataChart x:Name="theChart" Margin="5,0,5,0" >
   <ig:XamDataChart.Axes>
      <ig:CategoryXAxis x:Name="xmCategoryXAxis"
                        ItemsSource="{StaticResource CategoryData1}"
                        Label="{}{Category}">
        <ig:CategoryXAxis.LabelSettings>
           <ig:AxisLabelSettings x:Name="xmCategoryXAxisLabel" Extent="25" VerticalAlignment="Bottom" FontSize="11" />
           </ig:CategoryXAxis.LabelSettings>
        </ig:CategoryXAxis>
        <ig:NumericYAxis x:Name="xmNumericYAxis1">
           <ig:NumericYAxis.LabelSettings>
              <ig:AxisLabelSettings x:Name="xmNumericYAxisLabel" Extent="50" Location="OutsideLeft" />
              </ig:NumericYAxis.LabelSettings>
           </ig:NumericYAxis>
        </ig:XamDataChart.Axes>
        <ig:XamDataChart.Series>
           <ig:ColumnSeries x:Name="series1"
                            ItemsSource="{StaticResource CategoryData1}"
                            ValueMemberPath="Value"
                            XAxis="{Binding ElementName=xmCategoryXAxis}"
                            YAxis="{Binding ElementName=xmNumericYAxis1}">
              <ig:ColumnSeries.ToolTip>
                 <TextBlock Text="{Binding Item.Value}" />
              </ig:ColumnSeries.ToolTip>
           </ig:ColumnSeries>
           <ig:LineSeries ItemsSource="{StaticResource CategoryData2}"
                          ValueMemberPath="Value"
                          XAxis="{Binding ElementName=xmCategoryXAxis}"
                          YAxis="{Binding ElementName=xmNumericYAxis1}">
            <ig:LineSeries.ToolTip>
               <TextBlock Text="{Binding Item.Value}" />
            </ig:LineSeries.ToolTip>
         </ig:LineSeries>
         <ig:ItemToolTipLayer
                 TargetSeries="{Binding ElementName=series1}"
         />
   </ig:XamDataChart.Series>
</ig:XamDataChart>

C# の場合:

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

関連コンテンツ

トピック 目的

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

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

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

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

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