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

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

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

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

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

    シリーズの highlightedDataSourceItemsSource の間でスキーマが一致しない場合は、シリーズの HighlightedValueMemberPath プロパティを使用してこれを構成できます。さらに、シリーズ自体の ItemsSource をハイライト表示ソースとして使用し、サブセットを表すデータ項目にパスを設定したい場合は、これを行うことができます。これは、highlightedDataSource を提供せずに、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 プロパティ
    highlightedDataSource highlightedDataSource
    highlightedTitleSuffix highlightedTitleSuffix
    CategoryChart.HighlightedValueMemberPath Series.HighlightedValueMemberPath
    highlightedValuesDisplayMode highlightedValuesDisplayMode
    highlightedValuesFadeOpacity highlightedValuesFadeOpacity
    highlightedValuesDisplayMode highlightedValuesDisplayMode
    initialHighlightFilter
    initialGroups