バージョン

カテゴリ ツールチップ レイヤー

トピックの概要

目的

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

前提条件

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

トピック 目的

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

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

このトピックの内容

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

概要

カテゴリ ヒント レイヤーの概要

CategoryToolTipLayer は、カテゴリ軸を使用する XamDataChart コントロールのシリーズ用にグループ化されたヒントを表示します。

特殊な軸を対象とするヒントを構成できます。これには、TargetAxis プロパティを設定します。このプロパティの詳細は、以下のプロパティ セクションを参照してください。

デフォルトでは、グループ化されたツールチップは XamDataChart コントロールの一番上に表示されます。しかしこのデフォルト値は ToolTipPosition プロパティを設定することでオーバーライドできます。このプロパティの詳細は、以下の CategoryToolTipLayer セクションを参照してください。

プレビュー

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

Category Tooltip Layer 1.png

プロパティ

カテゴリ ヒント レイヤーの要点

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

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

Axis

このプロパティは、どの軸に有効なカテゴリ ヒント レイヤーを設定するかを指定します。

Style

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

bool

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

このプロパティは、ツールチップの位置を指定します。以下に設定できます。

  • Auto – 位置は自動的に選択されます

  • OutsideStart - 軸の外側の始まり部分に表示します。

  • InsideStart - 軸の内側の始まり部分に表示します。

  • InsideEnd - 軸の内側の終わり部分に表示します。

  • OutsideEnd - 軸の外側の終わり部分に表示します。

以下のスクリーンショットは、以下の設定で構成された CategoryToolTipLayer オブジェクトの ToolTipPosition プロパティで XamDataChart コントロールを描画する方法について説明します。

プロパティ

InsideStart

Category 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 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:CategoryToolTipLayer ToolTipPosition="InsideStart"
                               TransitionDuration="0:00:00.1" />
   </ig:XamDataChart.Series>
</ig:XamDataChart>

C# の場合:

var catToolTipLayerSeries = new CategoryToolTipLayer();
catToolTipLayerSeries.ToolTipPosition = CategoryTooltipLayerPosition.InsideStart;
chart.Series.Add(catToolTipLayerSeries);

関連コンテンツ

トピック 目的

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

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

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

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