syncfusion-blazor-stock-charts

株価チャートの実装

NuGet： Syncfusion.Blazor.Charts + Syncfusion.Blazor.Themes（または個別パッケージの Syncfusion.Blazor.StockChart） 名前空間： Syncfusion.Blazor.Charts

金融データを可視化する Syncfusion Blazor Stock Chart コンポーネントを実装するための包括的なスキルです。Stock Chart は、テクニカル分析、時間ベースのナビゲーション、金融指標のための機能を標準搭載し、株式市場データの可視化に特化しています。

このスキルを使用するタイミング

次のような場合は、すぐにこのスキルを使用してください。

• OHLC（始値、高値、安値、終値）の値を含む株価データを表示する
• 金融データ向けにローソク足、折れ線、または OHLC チャートを作成する
• テクニカル指標（SMA、EMA、MACD、RSI、ボリンジャーバンド、ATR、ストキャスティクス）を追加する
• 時間ベースのナビゲーション向けに期間セレクター（1M、3M、6M、YTD、1Y、すべて）を実装する
• カスタムの日付範囲を選択するための範囲セレクターを追加する
• 株式イベント（決算、配当、株式分割）を表示する
• 金融データにトレンドライン（線形、指数、多項式）を追加する
• データを調査するためのズーム、パン、十字線を有効にする
• 株価チャートを PNG、JPEG、SVG、または PDF 形式でエクスポートする
• 投資ポートフォリオのダッシュボードや取引アプリケーションを構築する
• 暗号資産の価格データや、あらゆる時系列金融データを可視化する
• Blazor Server、WebAssembly、または Web App 向けにレスポンシブな金融データの可視化を作成する

コンポーネントの概要

Syncfusion Blazor Stock Chart（SfStockChart）は、標準的なチャート機能を次のように拡張した、豊富な機能を備える金融チャートコンポーネントです。

• 5 種類の基本系列タイプ：Line、Spline、Candle、HiloOpenClose、Hilo
• 中空ローソク足モード：ローソク足の設定で、塗りつぶしまたは中空のローソク足を描画できます
• 9 種類以上のテクニカル指標：SMA、EMA、MACD、RSI、ボリンジャーバンド、ATR など
• 時間ナビゲーション：プリセット範囲を指定する期間セレクター、カスタム日付を指定する範囲セレクター
• 株式イベント：重要な日付（決算、配当、株式分割）をマークします
• トレンド分析：予測機能を備えた複数のトレンドラインタイプ
• インタラクティブ機能：ズーム、パン、十字線、トラックボールのツールチップ
• エクスポートオプション：PNG、JPEG、SVG、PDF へのエクスポートと印刷
• アクセシビリティ：キーボードナビゲーションに対応した WCAG 準拠

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

ここからインストール、セットアップ、最初の株価チャートの作成を始めます。次の内容を扱います。

• Syncfusion.Blazor.Charts NuGet パッケージのインストール
• Blazor Server、WebAssembly、Web App のセットアップ
• サービスの登録とテーマの設定
• サンプルデータを使用した基本的な SfStockChart の実装
• プロジェクト構成とスクリプト参照

基本的なチャート機能

系列タイプと描画

📄 参照： references/series-types.md

株価データの可視化に使用する 5 種類の基本系列タイプについて説明します。

• トレンドの可視化に使用する Line 系列と Spline 系列
• 従来型の株価チャートに使用する Candle 系列。ローソク足の設定で中空ローソク足の描画も利用できます
• 価格範囲の表示に使用する HiloOpenClose と Hilo
• 実行時にタイプを切り替える系列セレクター
• データに適した系列タイプの選択

データバインディングと構造

📄 参照： references/working-with-data.md

株価チャートのデータソースを設定します。

• OHLC データ構造（始値、高値、安値、終値、出来高）
• DateTime ベースのデータバインディング
• API を使用したリモートデータバインディング
• さまざまなデータソースに対応するデータアダプター
• 大規模なデータセットを効率的に処理する方法

軸の設定

📄 参照： references/axes.md

金融データ向けに X 軸と Y 軸をカスタマイズします。

• DateTime、DateTimeCategory、Logarithmic の軸タイプ
• 軸タイトル、ラベル、書式設定
• 目盛り線とグリッド線のカスタマイズ
• 出来高や指標の重ね合わせに使用する複数の軸
• 反転軸と反対側への配置

金融分析機能

期間セレクターと範囲セレクター

📄 参照: references/period-range-selectors.md

時間ベースのナビゲーションを実装します。

• プリセットボタン（1M、3M、6M、YTD、1Y、All）を備えた期間セレクター
• 期間ボタンのカスタム設定
• 日付範囲をドラッグする範囲セレクター
• セレクターのスタイルと位置の設定
• 期間変更イベントの処理

テクニカル指標

📄 参照: references/technical-indicators.md

金融分析指標を追加します。

• 単純移動平均（SMA）と指数移動平均（EMA）
• MACD（移動平均収束拡散）
• モメンタムを測定するRSI（相対力指数）
• ボラティリティ分析用のボリンジャーバンド
• ATR、累積／分布、ストキャスティクス
• 複数の指標のオーバーレイ
• 指標の外観のカスタマイズ

株式イベント

📄 参照: references/stock-events.md

チャート上に重要な日付を表示します。

• 決算発表、配当、株式分割の追加
• カスタムイベント図形とアイコン
• イベントの位置とスタイルの設定
• イベントのツールチップコンテンツ
• 同じチャート上に複数のイベントを表示

トレンドライン

📄 参照: references/trend-lines.md

系列にトレンド分析を追加します。

• 線形、指数、対数、多項式トレンド
• 移動平均トレンドライン
• 前方／後方の期間を使った予測
• トレンドラインの外観のカスタマイズ
• 系列ごとに複数のトレンドラインを表示

インタラクティブ機能

ズーム、パン、十字カーソル

📄 参照: references/zooming-panning-crosshair.md

データを探索するためのユーザー操作を有効にします。

• 範囲選択ズーム、ピンチズーム、マウスホイールズーム
• リセット機能付きズームツールバー
• ズームしたデータを移動するパンモード
• 値を正確に読み取るための十字カーソル
• 複数のポイントを比較するトラックボールモード
• ズームと十字カーソルの外観のカスタマイズ

ツールチップと凡例

📄 参照: references/tooltip-legend.md

ホバー時にデータの詳細を表示します。

• ツールチップの設定と書式指定
• カスタムツールチップテンプレート
• 複数の系列で共有するツールチップ
• 凡例の位置とカスタマイズ
• 凡例から系列の表示／非表示を切り替え
• 凡例クリックイベント

カスタマイズとスタイル設定

外観のカスタマイズ

📄 参照: references/appearance-customization.md

ビジュアルデザインをカスタマイズします。

• 株価チャートのタイトルとサブタイトル
• 組み込みテーマ（Material、Bootstrap、Fluent、Tailwindなど）
• チャートの寸法（幅、高さ、レスポンシブ対応）
• 系列のグラデーション塗りつぶし
• 最後のデータラベルの表示
• 枠線、背景、余白の設定
• カスタムCSSスタイル

エクスポートと印刷

📄 参照: references/export-print.md

レポートや共有用にチャートをエクスポートします。

• PNG、JPEG、SVG、PDF形式へのエクスポート
• エクスポートの設定とカスタマイズ
• 印刷専用スタイルを適用した印刷機能
• プログラムから、またはUIボタンを使ったエクスポート

高度なトピック

イベント

📄 参照: references/events.md

StockChartEventsが提供する株価チャートイベントを処理します。

• 描画後の初期化に使用するOnLoaded
• ポイント選択のシナリオに使用するOnPointClick
• 軸ラベルのカスタマイズに使用するAxisLabelRendering
• 時間ナビゲーションの更新に使用するPeriodChangedとRangeChange
• ズーム操作の処理に使用するOnZooming
• ツールチップのカスタマイズに使用するTooltipRenderingとSharedTooltipRendering
• 出力ワークフローに使用するExporting、ExportCompleted、OnPrintComplete

アクセシビリティ

📄 参照: references/accessibility.md

金融チャートをアクセシブルにします。

• WCAG 2.0準拠機能
• WAI-ARIA属性
• キーボードナビゲーションのサポート
• スクリーンリーダーとの互換性
• ハイコントラストテーマのサポート
• フォーカス管理のベストプラクティス

クイックスタートの例

ローソク足系列と期間セレクターを備えた、最小構成の株価チャートを示します。

@page "/stock-chart"
@using Syncfusion.Blazor.Charts

<SfStockChart Title="AAPL Stock Price" Height="450px">
    <StockChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
    </StockChartPrimaryXAxis>
    
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" Type="ChartSeriesType.Candle" 
                          XName="Date" High="High" Low="Low" Open="Open" Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
    
    <StockChartPeriods>
        <StockChartPeriod Text="1M" Interval="1" IntervalType="RangeIntervalType.Months"></StockChartPeriod>
        <StockChartPeriod Text="3M" Interval="3" IntervalType="RangeIntervalType.Months"></StockChartPeriod>
        <StockChartPeriod Text="6M" Interval="6" IntervalType="RangeIntervalType.Months"></StockChartPeriod>
        <StockChartPeriod Text="1Y" Interval="1" IntervalType="RangeIntervalType.Years"></StockChartPeriod>
        <StockChartPeriod Text="All"></StockChartPeriod>
    </StockChartPeriods>
</SfStockChart>

@code {
    public class StockInfo
    {
        public DateTime Date { get; set; }
        public double Open { get; set; }
        public double High { get; set; }
        public double Low { get; set; }
        public double Close { get; set; }
        public double Volume { get; set; }
    }

    public List<StockInfo> StockData = new List<StockInfo>
    {
        new StockInfo { Date = new DateTime(2024, 01, 01), Open = 175.5, High = 180.2, Low = 174.8, Close = 179.5, Volume = 12000000 },
        new StockInfo { Date = new DateTime(2024, 02, 01), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7, Volume = 15000000 },
        new StockInfo { Date = new DateTime(2024, 03, 01), Open = 183.7, High = 190.5, Low = 182.5, Close = 188.2, Volume = 18000000 },
        // Add more data points...
    };
}

一般的な使用例

1. テクニカル指標付きの株価ダッシュボード

<SfStockChart Title="Stock Analysis with SMA and RSI">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" Type="ChartSeriesType.Candle"
                          XName="Date" High="High" Low="Low" Open="Open" Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
    
    <StockChartIndicators>
        <StockChartIndicator Type="TechnicalIndicators.Sma" Period="14" Field="FinancialDataFields.Close">
        </StockChartIndicator>
        <StockChartIndicator Type="TechnicalIndicators.Rsi" Period="14" ShowZones="true">
        </StockChartIndicator>
    </StockChartIndicators>
</SfStockChart>

使用する場面： 投資分析ダッシュボード、取引プラットフォーム、ポートフォリオのモニタリング

2. 複数系列の比較（例：複数の株式の比較）

<SfStockChart Title="Tech Stocks Comparison">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@AppleData" Type="ChartSeriesType.Line" Name="AAPL"
                          XName="Date" YName="Close">
        </StockChartSeries>
        <StockChartSeries DataSource="@MicrosoftData" Type="ChartSeriesType.Line" Name="MSFT"
                          XName="Date" YName="Close">
        </StockChartSeries>
        <StockChartSeries DataSource="@GoogleData" Type="ChartSeriesType.Line" Name="GOOGL"
                          XName="Date" YName="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

使用する場面： ポートフォリオの比較、セクター分析、指数とのベンチマーク比較

3. 決算と配当を含む株式イベント

<SfStockChart Title="AAPL with Corporate Events">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" Type="ChartSeriesType.Candle"
                          XName="Date" High="High" Low="Low" Open="Open" Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
    
    <StockChartEvents>
        <StockChartEvent Date="new DateTime(2024, 02, 01)" Text="Q1 Earnings" Type="@SplineType.Circle">
        </StockChartEvent>
        <StockChartEvent Date="new DateTime(2024, 03, 15)" Text="Dividend $0.24" Type="@SplineType.Square">
        </StockChartEvent>
    </StockChartEvents>
</SfStockChart>

使用する場面： ファンダメンタル分析、イベントドリブン取引、企業カレンダーの視覚化

4. 出来高付きの暗号資産価格チャート

<SfStockChart Title="Bitcoin Price and Volume">
    <StockChartRows>
        <StockChartRow Height="70%"></StockChartRow>
        <StockChartRow Height="30%"></StockChartRow>
    </StockChartRows>
    
    <StockChartAxes>
        <StockChartAxis Name="VolumeAxis" OpposedPosition="true" RowIndex="1">
        </StockChartAxis>
    </StockChartAxes>
    
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@BitcoinData" Type="ChartSeriesType.Candle"
                          XName="Date" High="High" Low="Low" Open="Open" Close="Close">
        </StockChartSeries>
        <StockChartSeries DataSource="@BitcoinData" Type="ChartSeriesType.Column" Name="Volume"
                          XName="Date" YName="Volume" YAxisName="VolumeAxis">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

使用する場面： 暗号資産の追跡、24時間365日の市場の視覚化、デジタル資産ポートフォリオ

5. 株価チャートをPDFレポートにエクスポート

@using Syncfusion.Blazor.Charts

<button class="btn btn-primary" @onclick="ExportChart">Export to PDF</button>

<SfStockChart @ref="StockChartRef" Title="Annual Stock Performance">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" Type="ChartSeriesType.Candle"
                          XName="Date" High="High" Low="Low" Open="Open" Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

@code {
    SfStockChart StockChartRef;
    
    private async Task ExportChart()
    {
        await StockChartRef.ExportAsync(ExportType.PDF, "StockReport");
    }
}

使用する場面： 財務レポート、投資家向けプレゼンテーション、自動レポートシステム

主な設定プロパティ

株価チャートに必須のプロパティ

Property	Type	Purpose
Title	string	メインチャートのタイトル
Height / Width	string	チャートのサイズ（例："450px"、"100%"）
Theme	Theme	ビジュアルテーマ（Material、Bootstrap、Fluent など）
EnablePeriodSelector	bool	期間セレクターの表示／非表示（デフォルト：true）
EnableSelector	bool	範囲セレクターの表示／非表示（デフォルト：true）
EnableCustomRange	bool	カスタム日付範囲の入力を許可

公式APIリファレンス

📄 参照： references/api-reference.md

このページでは、検証済みの SfStockChart APIの概要を説明しています。以下が含まれます。

• Background、DataSource、SeriesType、IndicatorType、TrendlineType、Theme、Title、Height、Width などの主要プロパティ
• ExportAsync()、PrintAsync()、Refresh()、UpdateStockChart() などのメソッド
• StockChartSeriesCollection、StockChartIndicators、StockChartTrendlines、StockChartPeriods、StockChartEvents、StockChartAxes などの子コンポーネント

系列の設定

Property	Type	Purpose
Type	ChartSeriesType	系列の種類（Candle、Line、Hilo など）
DataSource	object	データコレクション
XName	string	X軸（日付）のプロパティ名
High / Low / Open / Close	string	OHLCプロパティ名
YName	string	Line／Spline系列のプロパティ
Fill	string	系列の色

期間セレクターのプロパティ

Property	Type	Purpose
Text	string	ボタンのラベル（例："1M"、"6M"、"1Y"）
Interval	int	期間の数
IntervalType	RangeIntervalType	日、月、年
Selected	bool	デフォルトで選択される期間

次のステップ

1. インストールと基本設定については、はじめにから始めます
2. 系列の種類から系列の種類を選択します
3. テクニカル指標からテクニカル指標を追加します
4. 期間セレクターと範囲セレクターを使って時間軸のナビゲーションを実装します
5. 外観のカスタマイズを使って見た目をカスタマイズします

質問や問題については、コンプライアンス要件に関するアクセシビリティまたは、ユーザー操作の処理に関するイベントを参照してください。