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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

その他のリソース

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

API リファレンス

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

`IgbCategoryChart` プロパティ	`IgbDataChart` プロパティ
`HighlightedDataSource`	`HighlightedDataSource`
`HighlightedTitleSuffix`	`HighlightedTitleSuffix`
`CategoryChart.HighlightedValueMemberPath`	`Series.HighlightedValueMemberPath`
`HighlightedValuesDisplayMode`	`HighlightedValuesDisplayMode`
`HighlightedValuesFadeOpacity`	`HighlightedValuesFadeOpacity`
`HighlightedValuesDisplayMode`	`HighlightedValuesDisplayMode`
`InitialHighlightFilter`
`InitialGroups`