React チャートのハイライト表示フィルター

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

データハイライト表示機能は IgrDataChart および IgrCategoryChart でサポートされていますが、これらのコントロールの動作の性質上、それぞれ異なる方法で構成されることに注意してください。ただし、この機能で変わらない点は、ハイライト表示を表示したい場合は highlightedValuesDisplayMode プロパティを Overlay に設定する必要があることです。以下では、ハイライト表示フィルター機能のさまざまな設定について説明します。

DataChart でのハイライト表示フィルターの使用

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

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

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

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

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

次の例は、HighlightedValuesDataLegendGroup を使用した IgrDataChart コントロール内のデータ凡例のグループ化とデータハイライトオーバーレイ機能の使用法を示しています。

次の例は、HighlightedValuesDataLegendGroup を使用した IgrDataChart コントロール内のデータツールチップのグループ化とデータハイライトオーバーレイ機能の使用法を示しています。

次の例は、HighlightedValueMemberPath を使用した IgrDataChart コントロール内のデータハイライト表示オーバーレイ機能の使用法を示しています。

CategoryChart でのハイライト表示フィルターの使用

IgrCategoryChart ハイライト表示フィルターは、initialHighlightFilter プロパティを設定することによってチャート上で発生します。IgrCategoryChart は、デフォルトで、基になるデータ項目のすべてのプロパティを考慮します。そのため、データのサブセットをフィルタリングできるようにデータをグループ化および集計できるように、チャート上でも initialGroups を定義する必要があります。initialGroups を基になるデータ項目の値パスに設定して、重複した値を持つパスでグループ化することができます。

IgrDataChart と同様に、highlightedValuesDisplayMode プロパティも IgrCategoryChart で公開されます。オーバーレイを表示したくない場合は、このプロパティを Hidden に設定できます。

以下の例は、IgrCategoryChart コントロール内でのデータハイライト表示オーバーレイ機能の使用法を示しています。

その他のリソース

関連するチャート機能の詳細については、次のトピックを参照してください。

API リファレンス

以下は上記のセクションで説明した API メンバーのリストです。

`IgrCategoryChart` プロパティ	`IgrDataChart` プロパティ
`CategoryChart.HighlightedItemsSource`	`Series.HighlightedItemsSource`
`highlightedTitleSuffix`	`highlightedTitleSuffix`
`CategoryChart.HighlightedValueMemberPath`	`Series.HighlightedValueMemberPath`
`highlightedValuesDisplayMode`	`highlightedValuesDisplayMode`
`highlightedValuesFadeOpacity`	`highlightedValuesFadeOpacity`
`highlightedValuesDisplayMode`	`highlightedValuesDisplayMode`
`initialHighlightFilter`
`initialGroups`