Web Components チャートのハイライト表示フィルター
Ignite UI for Web Components チャート コンポーネントは、プロットされたデータのサブセットを表示できるようにすることで、これらのチャートにプロットされた系列の視覚化を強化できるデータハイライト表示オーバーレイをサポートしています。これを有効にすると、列シリーズおよびエリア シリーズ タイプの場合は不透明度を下げて全体セットが表示され、線シリーズ タイプの場合は破線が表示されることで、データのサブセットがハイライト表示されます。これは、データセットの目標値と実際の値などを視覚化するのに役立ちます。以下の例で、この機能を説明します。
データハイライト表示機能は IgcDataChartComponent
および IgcCategoryChartComponent
でサポートされていますが、これらのコントロールの動作の性質上、それぞれ異なる方法で構成されることに注意してください。ただし、この機能で変わらない点は、ハイライト表示を表示したい場合は highlightedValuesDisplayMode
プロパティを Overlay
に設定する必要があることです。以下では、ハイライト表示フィルター機能のさまざまな設定について説明します。
DataChart でのハイライト表示フィルターの使用
IgcDataChartComponent
では、ハイライト表示フィルター API の多くは主に、ハイライト表示するデータのサブセットを表すコレクションに HighlightedItemsSource
プロパティを設定することによって、シリーズ自体で発生します。HighlightedItemsSource
内の項目の数は、ハイライト表示するシリーズの ItemsSource
にバインドされているデータの数と一致する必要があります。カテゴリ シリーズの場合は、デフォルトでハイライト表示パスとして定義した ValueMemberPath
が使用されます。このページの上部にあるサンプルでは、IgcDataChartComponent
の HighlightedItemsSource
を使用してオーバーレイを表示しています。
シリーズの HighlightedItemsSource
と ItemsSource
の間でスキーマが一致しない場合は、シリーズの HighlightedValueMemberPath
プロパティを使用してこれを構成できます。さらに、シリーズ自体の ItemsSource
をハイライト表示ソースとして使用し、サブセットを表すデータ項目にパスを設定したい場合は、これを行うことができます。これは、HighlightedItemsSource
を提供せずに、HighlightedValueMemberPath
プロパティをそのパスに設定するだけで行われます。
列およびエリア シリーズ の場合の不透明度の低減は、シリーズの highlightedValuesFadeOpacity
プロパティを設定することで構成できます。オーバーレイをまったく表示したくない場合は、highlightedValuesDisplayMode
プロパティを Hidden
に設定することもできます。
ハイライト表示フィルターによって表示されるシリーズの部分は、チャートの凡例レイヤーとツールチップ レイヤーに個別に表示されます。highlightedTitleSuffix
を設定することで、ツールチップと凡例に表示されるタイトルを構成できます。これにより、指定した値がシリーズの chartTitle
の末尾に追加されます。
DataLegend
または IgcDataToolTipLayerComponent
を使用すると、ハイライト表示されたシリーズがグループ化されて表示されます。これは、シリーズの HighlightedValuesDataLegendGroup
プロパティを設定してシリーズを適切に分類することで管理できます。
次の例は、HighlightedValuesDataLegendGroup
を使用した IgcDataChartComponent
コントロール内のデータ凡例のグループ化とデータ ハイライト オーバーレイ機能の使用法を示しています。
次の例は、HighlightedValuesDataLegendGroup
を使用した IgcDataChartComponent
コントロール内のデータ ツールチップのグループ化とデータ ハイライト オーバーレイ機能の使用法を示しています。
次の例は、HighlightedValueMemberPath
を使用した IgcDataChartComponent
コントロール内のデータハイライト表示オーバーレイ機能の使用法を示しています。
CategoryChart でのハイライト表示フィルターの使用
IgcCategoryChartComponent
ハイライト表示フィルターは、initialHighlightFilter
プロパティを設定することによってチャート上で発生します。IgcCategoryChartComponent
は、デフォルトで、基になるデータ項目のすべてのプロパティを考慮します。そのため、データのサブセットをフィルタリングできるようにデータをグループ化および集計できるように、チャート上でも initialGroups
を定義する必要があります。initialGroups
を基になるデータ項目の値パスに設定して、重複した値を持つパスでグループ化することができます。
IgcDataChartComponent
と同様に、highlightedValuesDisplayMode
プロパティも IgcCategoryChartComponent
で公開されます。オーバーレイを表示したくない場合は、このプロパティを Hidden
に設定できます。
以下の例は、IgcCategoryChartComponent
コントロール内でのデータハイライト表示オーバーレイ機能の使用法を示しています。
その他のリソース
関連するチャート機能の詳細については、次のトピックを参照してください。
API リファレンス
以下は上記のセクションで説明した API メンバーのリストです。
IgcCategoryChartComponent プロパティ |
IgcDataChartComponent プロパティ |
---|---|
CategoryChart.HighlightedItemsSource |
Series.HighlightedItemsSource |
highlightedTitleSuffix |
highlightedTitleSuffix |
CategoryChart.HighlightedValueMemberPath |
Series.HighlightedValueMemberPath |
highlightedValuesDisplayMode |
highlightedValuesDisplayMode |
highlightedValuesFadeOpacity |
highlightedValuesFadeOpacity |
highlightedValuesDisplayMode |
highlightedValuesDisplayMode |
initialHighlightFilter |
|
initialGroups |