React チャート注釈

React チャートのホバー操作と注釈は、シリーズ コレクションに追加されるシリーズであるホバー操作レイヤーを介して実装されます。これらのレイヤーはカーソルの位置に依存します。これらの注釈レイヤーはそれぞれ、個別に使用することも、他のレイヤーと組み合わせて強力なホバー操作を提供することもできる、異なるホバー操作を提供します。

React 注釈の例

次の例は、React チャートで使用できる注釈レイヤーを示しています。チェックボックスをクリックして、各レイヤーのオンとオフを切り替えます。

このサンプルが気に入りましたか? 完全な React ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

React 十字線レイヤー

IgrCrosshairLayer は、対象にするために構成される各シリーズの実際値で、異なるセットの線を描画する各シリーズと交差する十字線として描画されます。

十字線のタイプは次のとおりです:

• Horizontal
• Vertical
• Both

チャートの十字線は、crosshairsSnapToData プロパティを true に設定することでデータ ポイントにスナップするように構成することもできます。そうしないと、十字線がデータ ポイント間で補完されます。注釈を有効にして軸に沿って十字線の値を表示できます。

デフォルトではチャート コントロールのすべてのシリーズをターゲットにするため、特定のシリーズを 1 つだけ表示するように十字線レイヤーを構成できます。これには、targetSeries プロパティを設定します。

デフォルトでは、十字線の色は交差するシリーズよりも軽い色になります。しかし、このデフォルト値は、十字線に使用される色を選択できるようにオーバーライドできます。これは、十字線レイヤーの brush プロパティを設定することによって行われます。

次の例は、単一のシリーズをターゲットにして、タイプを垂直に設定し、ブラシの色をスタイリングすることによって、十字線レイヤーを構成する方法を示しています。

React 最終値レイヤー

IgrDataChart コントロールの IgrFinalValueLayer は、シリーズに表示された最終値の軸に沿ったクイック ビューをサポートします。

複数の最終値レイヤーを異なる設定で使用したい場合は、この注釈を設定して特定のシリーズをターゲットにすることができます。これには targetSeries プロパティを設定します。

次のプロパティを設定して、この注釈をカスタマイズすることもできます:

• axisAnnotationBackground: このプロパティは注釈の背景色を選択するために使用されます。デフォルトはシリーズのブラシを使用します。
• axisAnnotationTextColor: このプロパティは注釈のテキストの色のブラシを選択するために使用されます。
• axisAnnotationOutline: このプロパティは注釈のアウトライン色を選択するために使用されます。

次の例は、上記のプロパティを設定して、最終的な値レイヤーの注釈のスタイルを設定する方法を示しています。

 <IgrCategoryChart
    dataSource={this.state.data}
    finalValueAnnotationsVisible={true} />

React コールアウト レイヤー

IgrCalloutLayer はチャート コントロール既存または新しいデータの注釈を表示します。注釈は、データ ソース内の指定されたデータ値の横に表示されます。

コールアウト注釈を使用して、メモやデータ ポイントに関する特定の詳細など、ユーザーに追加情報を表示します。

複数のコールアウト レイヤーを異なる設定で使用する場合は、コールアウトを設定して特定のシリーズをターゲットにできます。これには targetSeries プロパティを設定します。

次のプロパティを設定して、この注釈をカスタマイズすることもできます:

• calloutLeaderBrush: このプロパティは、レイヤーのコールアウトのリーダー線のブラシを選択するために使用されます。
• calloutOutline: このプロパティは注釈のアウトライン色を選択するために使用されます。
• calloutBackground: このプロパティは注釈の背景色を選択するために使用されます。デフォルトはシリーズのブラシを使用します。
• calloutTextColor: このプロパティは注釈のテキストの色のブラシを選択するために使用されます。
• calloutStrokeThickness: このプロパティは、コールアウト バッキングの厚さを選択するために使用されます。
• calloutCornerRadius: このプロパティは、コールアウトのコーナーをカーブさせるために使用されます。
• allowedPositions: このプロパティは、コールアウト レイヤーが使用できる位置を選択するために使用されます。例: 上、下

次の例は、上記のプロパティを設定して、コールアウト レイヤーの注釈のスタイルを設定する方法を示しています。

 <IgrCategoryChart
    dataSource={this.state.data}
    calloutsVisible={true}
    calloutsDataSource={this.state.calloutData}
    calloutsXMemberPath="index"
    calloutsYMemberPath="value"
    calloutsLabelMemberPath="info" />

API リファレンス

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

• crosshairsSnapToData
• IgrCategoryChart