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

ファイナンシャル オーバーレイは、株価の動きの計測やトレンドを確認するためにトレーダーによって使用されます。これらのオーバーレイは、同じY軸スケールを共有するため、通常 IgxFinancialPriceSeriesComponent の前に表示されます。対照的に、財務指標は IgxFinancialPriceSeriesComponent と同じ Y 軸スケールを共有しないため、通常、財務指標は IgxFinancialPriceSeriesComponent またはオーバーレイの上または下にプロットされます。ただし、チャート コントロールは同じプロット領域でオーバーレイとインジケーターをサポートします。複数軸の使用や軸を共有することもできます。

サンプル

以下は、利用可能なファイナンシャル オーバーレイです。

  • IgxBollingerBandsOverlayComponent (BBO) は、価格の標準偏差に基づいて価格変動を幅に取り入れます。バンドは標準偏差が増加すると幅が広くなり、標準偏差が減少すると幅が狭くなります。また、バンドは移動平均で平滑化されます。標準偏差およびユーザーが調整可能な平滑化期間は別にして、BollingerBandsOverlay 幅のスケールに影響を及ぼすユーザーが調整可能な乗数もあります。、
  • IgxPriceChannelOverlayComponent (PCO) は、価格変動または平行線で価格の経時変化です。下の線はトレンド ラインで低い価格に描画されます。上の線はチャネル ラインで高値に基づきます。チャネルは任意の期間のトレンド方向を示します。価格チャネルまたはトレンドは、上、下または横が可能です。

軸の要件

Angular データ チャートコンポーネントはさまざまなタイプの軸を提供しますが、すべての財務シリーズでは、IgxNumericYAxisComponent を Y 軸として、IgxCategoryXAxisComponentIgxOrdinalTimeXAxisComponent、または IgxTimeXAxisComponent を X 軸としてのみ使用できます。

データの要件

ファイナンシャル オーバーレイには、以下のデータ要件があります。

  • データソースはデータ項目の配列またはリストである必要があります。
  • データソースは、少なくともデータ項目を 1 つ含む必要があり、含まない場合はデータ チャートでファイナンシャル シリーズを描画しません。
  • すべてのデータ項目には、財務軸の Label プロパティ (IgxCategoryXAxisComponent など) にマッピングされるデータ列 (文字列または日時) が少なくとも1つ含まれている必要があります。
  • すべてのデータ項目は、ファイナンシャル シリーズのプロパティ使用してマップされる 5 つの数値データ列を含む必要があります。 openMemberPathhighMemberPath, lowMemberPathcloseMemberPathvolumeMemberPath

上記データ要件を満たすデータソースとして SampleFinancialData を使用できます。

public dataSource: any[] = SampleFinancialData.create();

モジュールの要件

ファイナンシャル シリーズには以下のモジュールが必要です。

// axis' modules:
import { IgxNumericYAxis } from 'igniteui-angular-charts';
import { IgxCategoryXAxis } from 'igniteui-angular-charts';
// series' modules:
import { IgxFinancialPriceSeries } from 'igniteui-angular-charts';
import { IgxBollingerBandsOverlay } from 'igniteui-angular-charts';
// data chart's modules:

import { IgxDataChartCoreModule } from 'igniteui-angular-charts';
import { IgxDataChartCategoryModule } from 'igniteui-angular-charts';
import { IgxFinancialPriceSeriesModule } from 'igniteui-angular-charts';

// in app.module.ts file
@NgModule({
    imports: [
        // ...
        IgxDataChartCoreModule,
        IgxDataChartCategoryModule,
        IgxFinancialPriceSeriesModule,
        // ...
    ]
})

コード例

IgxBollingerBandsOverlayComponent でデータ チャートのインスタンスを作成する方法を示します。

 <igx-data-chart
    [dataSource]="dataSource"
    width="700px"
    height="500px">

    <igx-category-x-axis name="xAxis" label="Date"></igx-category-x-axis>
    <igx-numeric-y-axis  name="yAxis"></igx-numeric-y-axis>

    <igx-bollinger-bands-overlay
        name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        lowMemberPath="Low"
        highMemberPath="High"
        openMemberPath="Open"
        closeMemberPath="Close"
        volumeMemberPath="Volume">
    </igx-bollinger-bands-overlay>

 </igx-data-chart>

その他のリソース