React ハイライト

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

Note

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

React ハイライトの例

Edit on CodeSandbox

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>