syncfusion-aspnetcore-stock-chart

Syncfusion Stock Chart の実装

Syncfusion Stock Chart は、複数の系列タイプ、テクニカル指標、インタラクティブ機能に対応した、金融市場データの表示に特化したデータ可視化コントロールです。

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

次のような場合に、このスキルを使用します。

• ローソク足、折れ線、または OHLC チャートで株価データを表示する
• テクニカル分析指標（移動平均、RSI、ボリンジャーバンドなど）を追加する
• ズーム、選択、ツールチップを備えたインタラクティブなトレーディングダッシュボードを作成する
• 時間ベースのフィルタリングに範囲セレクターと期間セレクターを実装する
• 金融チャートにトレンドラインと株式イベントを可視化する
• テーマとグラデーションでチャートの外観をカスタマイズする

コンポーネントの概要

Stock Chart コンポーネントには、次の機能があります。

• さまざまなデータ可視化のニーズに対応する 6 種類の系列タイプ
• 金融分析向けの 10 種類のテクニカル指標
• 十字線、ツールチップ、ズームなどの インタラクティブ機能
• 柔軟なレイアウトを実現する 凡例と軸のカスタマイズ
• 注釈用の 株式イベントとトレンドライン
• レポート作成用の エクスポートおよび印刷機能
• 時間ベースのナビゲーション用の 期間セレクターと範囲セレクター
• カスタムのマーキングやラベル用の 注釈
• 複雑なレイアウトに対応する 複数軸のサポート

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

API リファレンス

📄 参照： references/api-reference.md

• Stock Chart コンポーネントの API ドキュメント一式
• コンストラクターとプロパティの定義
• イベントプロパティとコールバック
• 設定オプションと使用パターン
• 関連する設定クラスとデータ構造

はじめに

📄 参照： references/getting-started.md

• NuGet パッケージのインストールとセットアップ
• ASP.NET Core アプリケーションの作成
• タグヘルパーの設定
• 基本的なコントロールのレンダリング
• スクリプトマネージャーの登録

系列タイプとデータ可視化

📄 参照： references/series-types.md

• 主要な 6 種類の系列タイプ（Line、Candle、HollowCandle、Spline、Hilo、HiloOpenClose）
• データに適した系列の選択
• 系列の設定とカスタマイズ
• 各系列タイプに必要なデータ

データバインディングと設定

📄 参照： references/data-binding.md

• DataSource の設定とバインディング
• DateTime 軸と Numeric 軸
• OHLC データ構造
• 金融データの書式設定
• 日付ベースの軸設定

凡例のカスタマイズ

📄 参照： references/legend-customization.md

• 凡例の有効化と無効化
• 凡例の配置（Left、Right、Top、Bottom、Custom）
• 凡例の配置位置（Center、Near、Far）
• 座標を使ったカスタム配置
• 凡例の表示切り替え

テクニカル指標

📄 参照： references/technical-indicators.md

• 10 種類の指標（AccumulationDistribution、ATR、EMA、SMA、TMA、Momentum、MACD、RSI、Stochastic、BollingerBand）
• 指標の追加と削除
• 指標の設定とカスタマイズ
• 買われすぎ／売られすぎのしきい値
• 出来高ベースの指標

ユーザーインタラクション

📄 参照： references/user-interactions.md

• 十字線とトラックボール
• データポイントの選択モード
• ツールチップの設定
• ズームとスクロール操作
• インタラクティブ機能のカスタマイズ

高度な機能

📄 参照： references/advanced-features.md

• トレンドライン（線形、指数、ポリノミアルなど）
• 株式イベントと注釈
• フィルタリング用の範囲セレクター
• 時間ナビゲーション用の期間セレクター
• アクセシビリティ機能

カスタマイズと外観

📄 参照： references/customization-appearance.md

• チャートの寸法とサイズ設定
• テーマと配色
• 軸のカスタマイズ
• 視覚的な強調のためのグラデーション塗りつぶし
• エクスポートと印刷のオプション

クイックスタート

@{
    var stockData = new[]
    {
        new { x = new DateTime(2023, 1, 1), open = 150, high = 155, low = 145, close = 152, volume = 1000000 },
        new { x = new DateTime(2023, 1, 2), open = 152, high = 158, low = 151, close = 156, volume = 1200000 }
    };
}

<ejs-stockchart id="container">
    <e-stockchart-series-collection>
        <e-stockchart-series dataSource="stockData"
                             xName="x"
                             yName="close"
                             type="Candle">
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

よく使われるパターン

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

OHLC（始値、高値、安値、終値）データを表示する金融チャートを作成します。

<ejs-stockchart id="stockChart">
    <e-stockchart-primaryxaxis 
        valueType="DateTime">
    </e-stockchart-primaryxaxis>
    <e-stockchart-series-collection>
        <e-stockchart-series 
            dataSource="financialData" 
            xName="date" 
            yName="close" 
            type="Candle">
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

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

移動平均を追加して分析を強化します。

<ejs-stockchart id="stockChart">
    <e-stockchart-indicators>
        <e-stockchart-indicator 
            type="Ema" 
            field="Close" 
            period="14">
        </e-stockchart-indicator>
    </e-stockchart-indicators>
</ejs-stockchart>

パターン 3：インタラクティブ機能

クロスヘアとツールチップを有効にして、ユーザーが操作できるようにします。

<ejs-stockchart id="stockChart">
    <e-stockchart-tooltipsettings enable="true"></e-stockchart-tooltipsettings>
    <e-stockchart-crosshairsettings lineType="Vertical">
        <e-crosshairsettings-line color="red"></e-crosshairsettings-line>
    </e-stockchart-crosshairsettings>
</ejs-stockchart>

パターン 4：凡例の設定

凡例の位置を指定し、カスタマイズします。

<ejs-stockchart id="stockChart">
    <e-stockchart-legendsettings 
        visible="true" 
        position="Bottom" 
        alignment="Center">
    </e-stockchart-legendsettings>
</ejs-stockchart>

主なプロパティ

基本プロパティ

• dataSource：チャートのデータコレクション（配列または DataManager）
• xName：X 軸の値に使用するプロパティ名
• yName：Y 軸の値に使用するプロパティ名（通常は終値）
• type：系列の種類（Line、Candle、HollowCandle、Spline、Hilo、HiloOpenClose）

外観プロパティ

• background：チャートの背景色（hex または rgba）
• theme：ビジュアルテーマ（Material、Fabric、Bootstrap、MaterialDark など）
• width：チャートの幅（px または % を指定した文字列）
• height：チャートの高さ（px または % を指定した文字列）
• title：チャートのタイトルテキスト
• isTransposed：チャートを転置して描画するかどうか

機能制御プロパティ

• enablePeriodSelector：期間セレクターの表示／非表示（デフォルト：true）
• enableSelector：範囲セレクターの表示／非表示（デフォルト：true）
• enableCustomRange：カスタム範囲の選択を許可（デフォルト：true）
• enablePersistence：ページの再読み込み後もコンポーネントの状態を保持
• enableRtl：右から左の方向で描画
• isMultiSelect：複数のポイントの選択を有効化
• isSelect：選択機能を有効化

エクスポートプロパティ

• exportType：エクスポート形式（PNG、SVG、PDF）
• indicatorType：テクニカル指標の種類
• seriesType：系列の種類のオプション
• trendlineType：トレンドラインの種類のオプション

設定オブジェクト

• annotations：注釈設定のコレクション
• axes：第 2 軸のコレクション
• border：境界線の色と幅の設定
• chartArea：チャート領域の境界線と背景
• crosshair：クロスヘアのカスタマイズ設定
• legendSettings：凡例の外観と動作
• margin：チャートの余白（左、右、上、下）
• periods：期間セレクターのオプション
• primaryXAxis：主 X 軸の設定
• primaryYAxis：主 Y 軸の設定
• rows：複数のプロット領域の設定
• selectedDataIndexes：あらかじめ選択されたデータポイント
• selectionMode：選択モード（Point、Series、Cluster、DragXY、DragX、DragY、None）
• series：系列のコレクション
• stockEvents：株式イベントの注釈
• tooltip：ツールチップの設定
• zoomSettings：ズームとパンの設定

テンプレートプロパティ

• locale：カルチャとローカライズの値
• noDataTemplate：空のチャートを表示するためのテンプレート

主なイベント

チャートのライフサイクルイベント

• load：チャートの描画開始前に発生
• loaded：チャートの描画完了後に発生
• beforeExport：エクスポート処理の開始前に発生（エクスポートのカスタマイズが可能）

ユーザー操作イベント

• axisLabelRender：各軸ラベルの描画前に発生
• pointClick：データポイントのクリック時に発生
• pointMove：データポイント上でのマウス移動時に発生
• stockChartMouseClick：チャートのクリック時に発生
• stockChartMouseDown：マウスボタンを押したときに発生
• stockChartMouseUp：マウスボタンを離したときに発生
• stockChartMouseMove：チャート上にマウスカーソルを移動したときに発生
• stockChartMouseLeave：カーソルがチャートから離れたときに発生
• onZooming：ズーム範囲の選択完了後に発生
• rangeChange：範囲が変更されたときに発生

描画イベント

• seriesRender：各系列の描画前に発生
• legendRender：凡例の描画前に発生
• legendClick：凡例項目のクリック後に発生
• tooltipRender：ツールチップの描画前に発生
• crosshairLabelRender：クロスヘアのツールチップ描画前に発生
• selectorRender：セレクターの描画前に発生
• stockEventRender：株式イベントの描画前に発生

一般的なユースケース

1. 株価のモニタリング：ローソク足チャートでリアルタイムの株価を表示します
2. テクニカル分析ダッシュボード：複数の指標を組み合わせて取引分析を行います
3. ポートフォリオの概要：複数の株式を並べて視覚化します
4. 過去の株価推移：滑らかな折れ線グラフで長期的な価格の動きを表示します
5. 取引シグナル：トレンドラインや株式イベントをチャートに注釈として追加します
6. 期間による絞り込み：期間セレクターでユーザーが時間範囲を選択できるようにします

---

次のステップ

上記のナビゲーションガイドから、現在のタスクに合ったリファレンスファイルを選択してください。各リファレンスには、該当する機能領域について、完全に独立したドキュメントが含まれています。