バージョン

チャート強調表示フィルター

このトピックは、コード例を示して、データ強調表示機能を XamDataChart™ コントロールで使用する方法を説明します。

概要

XamDataChart コントロールは、プロットされたデータのサブセットを表示できるようにすることで、チャートにプロットされた系列の視覚化を強化できるデータ強調表示オーバーレイをサポートしています。これを有効にすると、列シリーズおよびエリア シリーズ タイプの場合は不透明度を下げて全体セットが表示され、線シリーズ タイプの場合は破線が表示されることで、データのサブセットが強調表示されます。これは、データ セットの目標値と実際の値などを視覚化するのに役立ちます。

XamDataChart での強調表示フィルターの使用

XamDataChart では、強調表示フィルター API の多くは主に、強調表示するデータのサブセットを表すコレクションに HighlightedItemsSource プロパティを設定することによって、シリーズ自体で発生します。HighlightedItemsSource 内の項目の数は、強調表示するシリーズのデータ ソースにバインドされているデータの数と一致する必要があります。カテゴリ シリーズの場合は、デフォルトで強調表示パスとして定義した ValueMemberPath が使用されます。

シリーズの HighlightedItemsSource とデータ ソースの間でスキーマが一致しない場合は、シリーズの HighlightedValueMemberPath プロパティを使用してこれを構成できます。さらに、シリーズ自体のデータ ソースを強調表示ソースとして使用し、サブセットを表すデータ項目にパスを設定したい場合は、これを行うことができます。これは、HighlightedItemsSource を提供せずに、HighlightedValueMemberPath プロパティをそのパスに設定するだけで行われます。

列およびエリア シリーズ の場合の不透明度の低減は、シリーズの HighlightedValuesFadeOpacity プロパティを設定することで構成できます。オーバーレイをまったく表示したくない場合は、HighlightedValuesDisplayMode プロパティを Hidden に設定することもできます。

強調表示フィルターによって表示されるシリーズの部分は、チャートの凡例レイヤーとツールチップ レイヤーに個別に表示されます。HighlightedTitleSuffix を設定することで、ツールチップと凡例に表示されるタイトルを構成できます。これにより、指定した値がシリーズの Title の末尾に追加されます。

DataLegend または DataToolTipLayer を使用すると、強調表示されたシリーズがグループ化されて表示されます。これは、シリーズの HighlightedValuesDataLegendGroup プロパティを設定してシリーズを適切に分類することで管理できます。

コード例

以下のコード スニペットは、XamDataChart コントロールの強調表示フィルター機能の使用法を示しています。

XAML の場合:

<ig:XamDataChart x:Name="chart" Grid.Row="2" >
    <ig:XamDataChart.Axes>
        <ig:CategoryXAxis x:Name="xAxis" ItemsSource="{Binding Data}" Label="{}{Category}"/>
        <ig:NumericYAxis x:Name="yAxis" MinimumValue="0" />
    </ig:XamDataChart.Axes>
    <ig:XamDataChart.Series>
        <ig:ColumnSeries XAxis="{Binding ElementName=xAxis}"
                         YAxis="{Binding ElementName=yAxis}"
                         ItemsSource="{Binding Data}"
                         ValueMemberPath="Total"
                         HighlightedValuesDisplayMode="Overlay"
                         HighlightedValueMemberPath="Mobile"
                         HighlightedTitleSuffix=" - Mobile"
                         Title="Online Traffic By Device Data"/>
    </ig:XamDataChart.Series>
</ig:XamDataChart>

C# の場合:

ColumnSeries series = new ColumnSeries()
{
    XAxis = xAxis,
    YAxis = yAxis,
    ItemsSource = data,
    ValueMemberPath = "Total",
    HighlightedValuesDisplayMode = SeriesHighlightedValuesDisplayMode.Overlay,
    HighlightedValueMemberPath = "Mobile",
    HighlightedTitleSuffix = " - Mobile",
    Title = "Online Traffic By Device Data"
};

chart.Series.Add(series);

Visual Basic の場合:

Dim series As ColumnSeries = New ColumnSeries() With {
    .XAxis = xAxis,
    .YAxis = yAxis,
    .ItemsSource = vm.Data,
    .ValueMemberPath = "Total",
    .HighlightedValuesDisplayMode = SeriesHighlightedValuesDisplayMode.Overlay,
    .HighlightedValueMemberPath = "Mobile",
    .HighlightedTitleSuffix = " - Mobile",
    .Title = "Online Traffic By Device Data"
}

chart.Series.Add(series)