Blazor 近似曲線

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

Blazor 近似曲線の例

ナビゲーションの構成

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

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

価格ペインの構成

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

<FinancialChart Width="100%"
   Height="100%"
   DataSource="DataSource"
   ChartType="FinancialChartType.Candle"
   Brushes="Green, Blue"
   Outlines="Green, Blue"
   NegativeBrushes="Red"
   NegativeOutlines="Red"
   Thickness="2" />

オーバーレイの構成

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

<FinancialChart Width="100%"
   Height="100%"
   DataSource="DataSource"
   ChartType="FinancialChartType.Candle"
   Brushes="Green, Blue"
   Outlines="Green, Blue"
   NegativeBrushes="Red"
   NegativeOutlines="Red"
   Thickness="2" />

インジケーターの構成

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

<FinancialChart Width="100%"
   Height="100%"
   DataSource="DataSource"                            
   IndicatorBrushes="Green, Blue"
   IndicatorNegativeBrushes="Red"                            
   IndicatorThickness="2" />

@code {
   protected override void OnInitialized()
   {
      this.Chart.IndicatorTypes.Add(FinancialIndicatorType.AverageTrueRange);
      this.Chart.IndicatorTypes.Add(FinancialIndicatorType.ForceIndex);

      this.Chart.IndicatorDisplayTypes.Add(IndicatorDisplayType.Line);
   }
}   

ボリューム ペインの構成

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

<FinancialChart Width="100%"
   Height="100%"
   DataSource="DataSource"
   VolumeType="FinancialChartVolumeType.Column"
   VolumeBrushes="Green, Blue"
   VolumeOutlines="White"
   VolumeThickness="2" />

トレンドラインの構成

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

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

<FinancialChart Width="100%"
   Height="100%"
   DataSource="DataSource"
   TrendLineType="TrendLineType.QuinticFit"
   TrendLineThickness="2"
   TrendLineBrushes="Green, Blue" />

タイトルの構成

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

<FinancialChart Width="100%"
   Height="100%"
   DataSource="DataSource"
   ChartTitle="Stock Prices"
   Subtitle="Between 2000 and 2015"/>

凡例の構成

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

<FinancialChart Width="100%"
   Height="100%"
   DataSource="DataSource"
   IsLegendVisible="true"/>