syncfusion-angular-stock-chart

株価チャートの実装

株価チャートコンポーネントは、OHLC（始値、高値、安値、終値）データ、テクニカル指標、インタラクティブな範囲選択など、金融データを時系列で表示するための専用ビジュアライゼーションです。株式市場の分析、暗号資産の追跡、その他あらゆる時系列の金融データの可視化に最適です。

このスキルを使用する場面

• 金融データの可視化： 株価、暗号資産価格、外国為替データを時系列で表示する
• OHLC チャート： ローソク足、バー、または折れ線で価格の動きを描画する
• テクニカル分析： 移動平均、ボリンジャーバンド、RSI、MACD などの指標を追加する
• 日付範囲の選択： 範囲セレクターまたは期間セレクターを使用して、ユーザーが特定の期間を選択できるようにする
• インタラクティブな探索： クロスヘア、ツールチップ、動的な系列切り替えを実装する
• リアルタイム更新： ライブデータフィードに対応し、チャートを自動更新する
• エクスポートと共有： PNG、SVG、PDF 形式でエクスポートするか、チャートを印刷する
• 複数系列の分析： 同じチャート上で複数の金融商品を比較する

コンポーネントの概要

株価チャートは、Syncfusion の Chart コンポーネントをベースに、専用機能を追加しています。

• 7 種類の系列タイプ： Line、Spline、Area、HiLo、HiLoOpenClose、Hollow Candle、Candle
• テクニカル指標： MA、BB、RSI、MACD、Stochastic など
• インタラクティブなコントロール： 範囲セレクター、期間セレクター、クロスヘア、ツールチップ
• DateTime 軸： 日付を自動処理し、ズームとパンに対応
• エクスポート対応： PNG、SVG、PDF、印刷機能
• スタンドアロンアーキテクチャ： Angular 19 以降のスタンドアロンコンポーネントで動作

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

API リファレンス

📄 参照： references/api-reference.md

はじめにとセットアップ

📄 参照： references/getting-started.md

• @syncfusion/ej2-angular-charts パッケージのインストール
• 初期モジュールのインポートとプロバイダーの設定
• 最初の株価チャートの作成
• JSON、API、または DataManager からのデータバインド
• セットアップが正常に動作することの確認

系列の設定

📄 参照： references/series-types.md

• 7 種類の系列タイプ（Candle、HiLo、Line、Area など）の理解
• データの種類に応じた系列タイプの選択
• 系列のプロパティと色の設定
• 系列タイプの動的な切り替え
• 複数系列のチャート

軸のカスタマイズ

📄 参照： references/axis-customization.md

• 時系列データ向けの DateTime 軸
• 数値軸と対数軸
• 軸ラベル、タイトル、範囲
• クロスヘアとツールチップの設定
• 範囲のズームとパン

凡例とスタイル

📄 参照： references/legend.md

• 凡例の有効化と配置
• 凡例の整列とサイズ調整
• アイコン形状のカスタマイズ
• 系列の表示切り替え
• 凡例の操作パターン

インタラクティブ機能

📄 参照： references/interactive-features.md

• 範囲セレクター（日付範囲の選択）
• 期間セレクター（1M、3M、6M、1Y のショートカット）
• データラベルと書式設定
• ツールチップのカスタマイズ
• クロスヘアの表示と操作
• イベントとユーザー操作

テクニカル指標

📄 参照： references/technical-indicators.md

• テクニカル指標（MA、BB、RSI、MACD など）の追加
• 指標の計算パラメーター
• 同じチャート上での複数指標の表示
• 指標の色とスタイルのカスタマイズ
• 指標の削除または表示切り替え

エクスポートと印刷

📄 参照： references/export-print.md

• チャートの PNG、SVG、PDF 形式でのエクスポート
• 印刷プレビュー機能
• エクスポートしたファイルの保存
• 複数チャートの一括エクスポート

高度な機能と最適化

📄 参照： references/advanced-features.md

• ライブデータの更新とリアルタイムの再表示
• アクセシビリティ（WCAG、ARIA、キーボード操作）
• 国際化とローカライズ
• トレンドラインと注釈
• 大規模なデータセット向けのパフォーマンス最適化

クイックスタート

最小限の株価チャートの設定

import { Component, ViewEncapsulation } from '@angular/core';
import { ChartAllModule, StockChartAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [ChartAllModule, StockChartAllModule],
    standalone: true,
    selector: 'app-stock-chart',
    template: `
        <ejs-stockchart id='stockchart-container' [dataSource]='data'>
            <e-stockchart-series-collection>
                <e-stockchart-series [dataSource]='data' type='Candle' 
                    xName='x' high='high' low='low' 
                    open='open' close='close'>
                </e-stockchart-series>
            </e-stockchart-series-collection>
        </ejs-stockchart>
    `,
    encapsulation: ViewEncapsulation.None
})
export class StockChartComponent {
    data: any[] = [
        { x: new Date(2023, 0, 1), open: 100, high: 105, low: 95, close: 102 },
        { x: new Date(2023, 0, 2), open: 102, high: 108, low: 100, close: 105 },
        { x: new Date(2023, 0, 3), open: 105, high: 110, low: 103, close: 108 }
    ];
}

よくあるパターン

パターン 1：日時軸を使用したローソク足チャート

OHLC データをローソク足として描画し、x 軸の日付を自動で書式設定します。

<ejs-stockchart>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle' xName='date' 
            high='high' low='low' open='open' close='close'>
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

用途： 株価の OHLC データの表示、価格パターンの分析
理由： ローソク足を使うと、始値と終値の関係をひと目で確認できます

パターン 2：範囲選択機能を備えた複数系列

日付範囲を選択して、異なる指標や金融商品を比較します。

<ejs-stockchart [rangeSelector]='{ periods: [{text: "1M", interval: 1, intervalType: "Months"}, 
    {text: "1Y", interval: 1, intervalType: "Years"}] }'>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle'></e-stockchart-series>
        <e-stockchart-series type='Line'></e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

用途： ユーザーが異なる期間を表示する必要がある場合、トレンドの分析
理由： 期間をすばやく切り替えることで、データの探索効率が向上します

パターン 3：テクニカル指標の追加

価格データに移動平均線を重ねて表示します。

<ejs-stockchart>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle'></e-stockchart-series>
    </e-stockchart-series-collection>
    <e-indicators>
        <e-indicator type='Sma' field='close' period='14' seriesName='SMA'></e-indicator>
    </e-indicators>
</ejs-stockchart>

用途： 移動平均線、RSI、その他のテクニカル分析を追加する場合
理由： 指標はトレンドやシグナルの特定に役立ちます

パターン 4：インタラクティブなクロスヘアとツールチップ

ホバー時に詳細な値を確認できるようにします。

<ejs-stockchart [crosshair]='{ enable: true, lineType: "Vertical" }' 
    [tooltip]='{ enable: true }'>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle'></e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

用途： ユーザーが正確な値を確認する必要がある場合
理由： 認知負荷を軽減し、データの発見を促します

主要なプロパティ

系列の設定

• type：系列の描画タイプ（ローソク足、折れ線、面、HiLo など）
• xName：x 軸の日付に対応するデータフィールド
• high、low、open、close：OHLC データフィールド
• dataSource：データポイントの配列または DataManager

チャートの表示

• height、width：チャートのサイズ
• title：チャートのタイトル
• legendSettings：凡例の配置と外観
• tooltip：ホバー時の値の表示
• crosshair：クロスヘアの表示と動作

インタラクティブ機能

• rangeSelector：日付範囲を選択するボタン
• periodSelector：期間をすばやく選択するボタン（1M、1Y など）
• zoomSettings：チャートのズーム設定
• chartArea：チャート描画領域のサイズ

軸の設定

• primaryXAxis：x 軸（通常は日時）
• primaryYAxis：y 軸（価格）
• secondaryYAxis：指標用のオプションの第 2 y 軸

よくあるユースケース

ユースケース 1：株価分析ダッシュボード

複数の株価を横並びで表示し、範囲選択機能を使って期間ごとのパフォーマンスを比較します。テクニカル指標（MA、RSI）はトレンドの強さの特定に役立ちます。

ユースケース 2：リアルタイムの暗号通貨トラッカー

新しい価格ローソク足の形成に合わせて、数秒ごとにチャートデータを更新します。ライブ範囲選択機能も最新データを含むように更新されます。ツールチップにはリアルタイムの買値と売値のスプレッドが表示されます。

ユースケース 3：過去データの分析

過去のデータセット全体（月単位／年単位）を読み込みます。ズームやパンで特定期間を詳細に確認できます。エクスポート機能を使うと、分析結果を保存できます。

ユースケース 4：複数の指標を使ったテクニカル分析

1 つの価格チャートに複数のテクニカル指標を重ねて表示します。値の範囲に応じて個別の軸を設定できます。凡例を操作して指標の表示を切り替えられます。