バージョン

カテゴリ項目強調表示レイヤー

トピックの概要

目的

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

前提条件

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

トピック 目的

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

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

このトピックの内容

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

概要

カテゴリ項目強調表示レイヤーの概要

CategoryItemHighlightLayer は、縞模様シェイプをまたはマーカーをその位置で描画することによりカテゴリ軸を使用してシリーズで項目を強調表示します。

デフォルトの強調表示はシリーズの型に依存します。たとえば、 ColumnSeriesLineSeries は同じではありません。 ColumnSeries の場合は縞模様シェイプであり、 LineSeries の場合はマーカーです。 HighlightType プロパティを設定してデフォルトの強調表示をオーバーライドできます。このプロパティの詳細は、以下のプロパティ セクションを参照してください。

プレビュー

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

Category Item Highlight Layer 1.png

プロパティ

カテゴリ項目強調表示レイヤーのサマリー

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

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

double

このプロパティは、グリッドライン上に配置されたシリーズにおいて項目の強調表示領域の幅を指定します。たとえば、 LineSeriesAreaSeries および SplineSeries です。

このプロパティは、グリッドライン間に配置されたシリーズがある場合は影響を及ぼしません。たとえば、 ColumnSeries および WaterfallSeries です。

このプロパティに値セットがある場合、縞模様シェイプがグリッドラインの周りに強調表示されます。

このプロパティは、強調表示の見た目を指定します。

デフォルトでは、 LineSeries などのシリーズにはマーカーを、 ColumnSeries などの場合は強調表示縞模様シリーズを使用します。

bool

このプロパティは、強調表示バンドがグリッドラインにスナップするのでなくカーソルにスナップすべきかどうかを指定します。

このプロパティは、グリッドライン間に配置されたシリーズがある場合は影響を及ぼしません。たとえば、 ColumnSeries および WaterfallSeries シリーズです。

DataTemplate

このプロパティは、利用可能なマーカー タイプを使用する代わりにマーカー強調表示タイプにどのテンプレートを使用するかを指定します。

以下のスクリーンショットは、XamDataChart コントロールと control with the CategoryItemHighlightLayer オブジェクトの BandHighlightWidth および Brush プロパティが以下の設定の結果としてどのように見えるかを示しています。

プロパティ

Red

Marker

Category Item Highlight 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>
         <ig:LineSeries ItemsSource="{StaticResource CategoryData2}"
                        ValueMemberPath="Value"
                        XAxis="{Binding ElementName=xmCategoryXAxis}"
                        YAxis="{Binding ElementName=xmNumericYAxis1}">
         </ig:LineSeries>
         <ig:CategoryItemHighlightLayer HighlightType="Marker" Brush="Red" />
   </ig:XamDataChart.Series>
</ig:XamDataChart>

C# の場合:

var catItemHighlightLayerSeries = new CategoryItemHighlightLayer();
catItemHighlightLayerSeries.HighlightType = CategoryItemHighlightType.Marker;
catItemHighlightLayerSeries.Brush = new SolidColorBrush(Colors.Red);
theChart.Series.Add(catItemHighlightLayerSeries);

VB の場合:

Dim catItemHighlightLayerSeries As New CategoryItemHighlightLayer()
catItemHighlightLayerSeries.HighlightType = CategoryItemHighlightType.Marker;
catItemHighlightLayerSeries.Brush = New SolidColorBrush(Colors.Red)
theChart.Series.Add(catItemHighlightLayerSeries)

関連コンテンツ

トピック 目的

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

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

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

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

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