Web Components 近似曲線

Web Components Financial Chart コンポーネントで、ナビゲーション動作、トレンドラインレイヤー、オーバーレイ、凡例、チャートタイトル、チャートサブタイトルなどのカスタマイズ可能なビジュアルがあります。

Web Components 近似曲線の例

ナビゲーションの構成

Web Components Financial Chart コンポーネントでは、チャートナビゲーションがデフォルトで有効になっています。ただし、以下のプロパティを設定することによって、カスタマイズできます。

isHorizontalZoomEnabled - チャートがユーザー操作により水平方向にズーム可能かどうかを指定します。デフォルトでこのプロパティは true に設定されます。
isVerticalZoomEnabled - チャートがユーザー操作により垂直方向にズーム可能かどうかを指定します。デフォルトでこのプロパティは false に設定されます。
isWindowSyncedToVisibleRange - true に設定される場合、Y 軸は表示データ範囲に自動的にサイズ変更します。デフォルトでこのプロパティは false に設定されます。
windowRect - IgcFinancialChartComponent のスクロール状態およびズーム状態を取得または設定するために使用できます。windowRect は、 0 ~ 1 の間の座標およびサイズの Rectangle として表現されます。

 <igc-financial-chart id="chart"
    width="850px"
    height="600px"
    is-horizontal-zoom-enabled="true"
    is-vertical-zoom-enabled="false">
 </igc-financial-chart>

価格ペインの構成

価格ペインは常に Financial Chart で表示されます。チャートタイプを変更、またはビジュアルの外観をカスタマイズして構成します。以下のコードは価格ペインでシリーズのブラシおよび太さを設定します。

 <igc-financial-chart id="chart"
    width="850px"
    height="600px"
    chart-type="Candle"
    brushes="Green, Blue"
    outlines="Green, Blue"
    negative-brushes="Red"
    negative-outlines="Red"
    thickness="2">
 </igc-financial-chart>

オーバーレイの構成

オーバーレイはデフォルトで Web Components Financial Chart に表示されません。オーバーレイには、BollingerBands および PriceChannel の 2 種類があります。オーバーレイのデフォルト設定をカスタマイズできます。以下のコードはオーバーレイの色、アウトライン、および太さを設定します。

 <igc-financial-chart id="chart"
    width="850px"
    height="600px"
    overlay-types="BollingerBands"
    overlay-brushes="Red"
    overlay-outlines="Green"
    overlay-thickness="2">
 </igc-financial-chart>

インジケーターの構成

デフォルトでインジケーターペインは Financial Chart に表示されません。ツールバーを使用してランタイムに表示するインジケーターを選択できます。ペインを表示するには、以下のコードのようにインジケータータイプを設定する必要があります。

 <igc-financial-chart id="chart"
    width="850px"
    height="600px"
    indicator-types="AverageTrueRange,ForceIndex"
    indicator-brushes="Green, Blue"
    indicator-negative-brushes="Red"
    indicator-display-types="Line"
    indicator-thickness="2">
 </igc-financial-chart>

ボリュームペインの構成

デフォルトでボリュームペインは Financial Chart に表示されません。ただし、チャートツールバーを使用してランタイムにこのペインを有効にするか、以下のコードのようにコードで有効にできます。

 <igc-financial-chart id="chart"
    width="850px"
    height="600px"
    volume-type="Column"
    volume-brushes="Green, Blue"
    volume-outlines="White"
    volume-thickness="2">
 </igc-financial-chart>

トレンドラインの構成

トレンドラインはデフォルトでは Web Components Financial Chart に表示されません。トレンドラインが表示される場合、同じトレンドラインがすべてのチャートペインに表示されます。トレンドラインのデフォルト設定をカスタマイズできます。

以下のコードはトレンドラインの色および太さを設定します。

 <igc-financial-chart id="chart"
    width="850px"
    height="600px"
    trend-line-type="QuinticFit"
    trend-line-thickness="2"
    trend-line-brushes="Green, Blue">
 </igc-financial-chart>

タイトルの構成

チャートツールバーおよび Financial Chart の価格ペインの間に表示されるタイトルおよびサブタイトルを設定できます。以下のコード例は、タイトルとサブタイトルを設定する方法を紹介します。

 <igc-financial-chart id="chart"
    width="850px"
    height="600px"
    chart-title="Stock Prices"
    subtitle="Between 2000 and 2015">
 </igc-financial-chart>

凡例の構成

凡例はデフォルトで表示されません。以下のコードは、凡例を有効する方法を示します。

 <igc-financial-chart id="chart"
    width="850px"
    height="600px"
    is-legend-visible="true">
 </igc-financial-chart>

Web Components 近似曲線