Angular チャートのオーバーレイ

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

    Angular 値オーバーレイの例

    次の例は、いくつかの水平値オーバーレイがプロットされた縦棒チャートを示しています。

    Angular 値オーバーレイのプロパティ

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

    数値の X 軸または Y 軸を使用する場合、ValueMemberPath プロパティは、値のオーバーレイを描画する軸上の実際の数値を反映する必要があります。カテゴリ X または Y 軸を使用する場合、ValueMemberPath は、値オーバーレイを表示するカテゴリのインデックスを反映する必要があります。

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

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

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

    Angular 値レイヤー

    Angular チャート コンポーネントは、値の線を使用して、最小値、最大値、平均値などのデータのさまざまな焦点を示す機能も公開します。

    IgxCategoryChartComponent および IgxFinancialChartComponent コンポーネントに IgxValueLayerComponent を適用するには、チャート上で valueLines プロパティを設定します。このプロパティは、ValueLayerValueMode 列挙体のコレクションを受け取ります。複数の ValueLayerValueMode 列挙をチャートの valueLines コレクションに追加することで、同じチャート内で複数の値レイヤーを組み合わせたりできます。

    IgxDataChartComponent では、これは、チャートの IgxSeriesComponent コレクションに IgxValueLayerComponent を追加し、次に valueMode プロパティを ValueLayerValueMode 列挙の 1 つに設定することによって行われます。これらの各列挙とその意味を以下に示します。

    • Auto: ValueLayerValueMode 列挙体のデフォルト値モード。
    • Average: 複数の値の線を適用して、チャートにプロットされた各系列の平均値を呼び出します。
    • GlobalAverage: 単一の値線を適用して、チャート内のすべての系列値の平均を呼び出します。
    • GlobalMaximum: 単一の値線を適用して、チャート内のすべての系列値の絶対最大値を呼び出します。
    • GlobalMinimum: 単一の値線を適用して、チャート内のすべての系列値の絶対最小値を呼び出します。
    • Maximum: チャートにプロットされた各系列の最大値を示すために、複数の値線を適用する可能性があります。
    • Minimum: チャートにプロットされた各系列の最小値を示すために、複数の値線を適用する可能性があります。

    IgxValueLayerComponent 要素を使用するときに特定のシリーズが考慮されないようにする場合は、レイヤーに targetSeries プロパティを設定できます。これにより、レイヤーは定義したシリーズを強制的にターゲットにするようになります。単一の IgxDataChartComponent 内に必要な数の IgxValueLayerComponent 要素を含めることができます。

    次のサンプルは、IgxCategoryChartComponent 内のさまざまな valueLines の使用法を示しています。

    Angular ファイナンシャル オーバーレイ

    Angular 株価チャートに組み込みのファイナンシャル オーバーレイとインジケーターをプロットすることもできます。

    その他のリソース

    関連するチャート タイプの詳細については、以下のトピックを参照してください。

    API リファレンス

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