Angular 値オーバーレイ

Ignite UI for Angular データチャート コンポーネントを使用すると、IgxValueOverlayComponent を使用して定義した単一の数値で水平線または垂直線を配置できます。特定のシリーズの平均値や中央値などのデータを視覚化するのに役立ちます。

Angular 値オーバーレイ例

データバインディングに DataSource を使用する他のシリーズタイプとは異なり、値オーバーレイは valueMemberPath プロパティを使用して単一の数値をバインドします。値オーバーレイでは、使用する単一の軸を定義する必要があります。X 軸を使用する場合、値のオーバーレイは垂直線になり、Y 軸を使用する場合は、水平線になります。

数値のX軸またはY軸を使用する場合、valueMemberPath プロパティは、値のオーバーレイを描画する軸上の実際の数値を反映する必要があります。数値の X 軸または Y 軸を使用する場合、valueMemberPath は、値のオーバーレイを描画する軸上の実際の数値を反映する必要があります。

数値オーバーレイを角度角軸で使用すると、チャートの中心からの線として表示され、半径半径軸を使用すると、円として表示されます。

IgxValueOverlayComponent 外観プロパティは、IgxSeriesComponent から継承されているため、例えば brushthickness を使用でき、他のタイプのシリーズと同じように機能します。

isAxisAnnotationEnabled プロパティを true に設定してIgxValueOverlayComponent に軸注釈を表示し、軸にオーバーレイの値を表示することもできます。

コード例

以下のコード スニペットは、Ignite UI for Angular データチャート コンポーネントに値オーバーレイを追加する方法を示しています。

<igx-data-chart #chart height="600px" width="800px" [dataSource]="data">
  <igx-category-x-axis #xAxis label="Label"></igx-category-x-axis>
  <igx-numeric-y-axis #yAxis></igx-numeric-y-axis>

  <igx-column-series [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Value"></igx-column-series>

  <igx-value-overlay [axis]="yAxis" value=5 thickness=5 isAxisAnnotationEnabled=true></igx-value-overlay>

</igx-data-chart>