React ハイライト

React データチャートコンポネントを使用すると、データチャートにプロットされたシリーズを強調表示し、マウスが移動している項目またはシリーズを視覚化、または強調表示レイヤーを使用して視覚化できます。

Note

注: ハイライトは、積層型シリーズで現在サポートされていません。

React ハイライトの例

React データチャートコンポネントでハイライトを有効にするには、対話モジュールをインポートして登録する必要があります。以下のコードを使用できます。

import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';
import { IgrDataChartAnnotationModule } from 'igniteui-angular-charts';

IgrDataChartInteractivityModule.register();
IgrDataChartAnnotationModule.register();

シリーズビジュアルをハイライト

React データチャートコンポネントのシリーズハイライト機能を使用すると、単一のアイテムまたはシリーズ全体を強調表示できます。たとえば、折れ線シリーズを使用している場合、ハイライトは線の形状全体を 1 つの単一形状として強調表示します。ただし、列シリーズなどのシリーズの各項目にハイライトを適用することはできます。

次のコードスニペットは、データチャートのシリーズで強調表示を有効にする方法を示しています。

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">
    <IgrCategoryXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />
    <IgrColumnSeries name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        valueMemberPath="Value1"
        isHighlightingEnabled={this.state.isSeriesHighlighting} />
    <IgrColumnSeries name="series2"
        xAxisName="xAxis"
        yAxisName="yAxis"
        valueMemberPath="Value2"
        isHighlightingEnabled={this.state.isSeriesHighlighting}  />
</IgrDataChart>

シリーズカテゴリをハイライト

カテゴリ軸または React データチャートコンポネント内のすべてのカテゴリ軸に対する注釈レイヤーを表します。軸に、軸の主グリッド線の間に配置されるシリーズ、たとえば列シリーズなどが含まれる場合、現在のカテゴリを塗りつぶすシェイプが描画されます。

ラインシリーズなどその他のシリーズの場合、マウス位置に最も近いグリッドラインで調節可能な幅を持つバンドを描画します。この場合、UseInterpolation プロパティが有効になると、x 位置がカーソルの x 位置に付け加えられます。

Brush プロパティを設定して、強調表示領域の色を変更することもできます。

以下は、データチャートにカテゴリハイライトレイヤーを追加する方法を示すコードスニペットです。

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">

    <IgrCategoryXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrColumnSeries name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        valueMemberPath="Value1" />

    <IgrColumnSeries name="series2"
        xAxisName="xAxis"
        yAxisName="yAxis"
        valueMemberPath="Value2" />

    <IgrCategoryHighlightSeries />
</IgrDataChart>

シリーズ項目をハイライト

カテゴリ項目ハイライトレイヤーは、縞模様の図形またはマーカーをその位置で描画することにより、カテゴリ軸を使用してシリーズの項目を強調表示します。

デフォルトの強調表示はシリーズの型に依存します。たとえば、列シリーズと行シリーズのハイライトは異なります。列シリーズの場合は縞模様で、ラインシリーズの場合はマーカーです。HighlightType プロパティを設定してデフォルトの強調表示をオーバーライドできます。

次のコードスニペットは、React データチャートコンポネントにカテゴリ項目ハイライトレイヤーを追加する方法を示しています。

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">

    <IgrCategoryXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrColumnSeries name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        valueMemberPath="Value1" />

    <IgrColumnSeries name="series2"
        xAxisName="xAxis"
        yAxisName="yAxis"
        valueMemberPath="Value2" />

    <IgrCategoryHighlightLayer name="CategoryHighlightLayer" />
</IgrDataChart>