syncfusion-aspnetcore-smithchart

Syncfusion Smith Chart の実装

Syncfusion Smith Chart は、高周波回路アプリケーション向けに設計された特殊なデータ可視化コントロールです。特に、伝送線路パラメーターのプロットやインピーダンス／アドミタンス解析に役立ちます。このスキルでは、ASP.NET Core アプリケーションで Smith Chart を実装、構成、カスタマイズする方法を説明します。

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

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

• Smith Chart で伝送線路パラメーターを可視化する
• インピーダンスおよびアドミタンスの系列をプロットする
• RF およびマイクロ波回路解析のダッシュボードを作成する
• マーカーやデータラベルを含む複数の系列を表示する
• ツールチップと凡例を備えたインタラクティブなチャートを実装する
• Smith Chart の可視化をエクスポートまたは印刷する
• アクセシビリティに配慮した技術可視化インターフェイスを構築する

コンポーネントの概要

Smith Chart コントロールは、次の機能を備えています。

• 任意の数の系列とデータポイントをサポート
• インピーダンス系列およびアドミタンス系列のレンダリングタイプ
• インタラクティブなマーカーとデータラベル
• 表示切り替え機能を備えた凡例
• 詳細なデータを確認できるツールチップ操作
• 印刷およびエクスポート機能（JPEG、PNG、SVG、PDF）
• 完全なアクセシビリティ対応（WCAG 2.2 AA）
• さまざまな画面サイズに対応するレスポンシブなサイズ設定

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

API リファレンス

📄 参照: references/api-reference.md

• Smith Chart コンポーネントの完全な API ドキュメント
• コンストラクターとプロパティの定義
• イベントプロパティとコールバック
• 系列、軸、スタイルの構成
• 凡例とツールチップの設定
• データ構造の要件

はじめにとセットアップ

📄 参照: references/getting-started.md

• ASP.NET Core 用 NuGet パッケージのインストール
• TagHelper の構成とインポート
• スクリプトリソースと初期化
• Smith Chart の基本的なレンダリング
• 最初に動作するサンプル

データバインディングと系列の構成

📄 参照: references/data-binding.md

• 抵抗値／リアクタンス値フィールドを含む JSON データ構造
• points プロパティと datasource プロパティの使い分け
• Smith Chart への複数系列のバインド
• データ準備のパターン

📄 参照: references/series-configuration.md

• 系列のカスタマイズ（塗りつぶし色、不透明度、幅）
• スマートなラベル配置
• 系列の表示とスタイル設定
• 複数系列の管理

軸と寸法

📄 参照: references/axis-configuration.md

• 水平軸と放射軸の構成
• ラベルのカスタマイズと配置方法
• 主目盛線と補助目盛線の設定
• 軸線のスタイル設定と表示

📄 参照: references/dimensions-sizing.md

• コンテナーに基づくサイズ設定方法
• ピクセル単位の幅／高さの構成
• パーセンテージに基づくレスポンシブなサイズ設定
• レスポンシブデザインのパターン

視覚要素（マーカー、ラベル、凡例）

📄 参照: references/markers-labels.md

• データポイントのマーカーの有効化と構成
• マーカーの形状、色、不透明度、境界線のカスタマイズ
• データラベルの有効化と表示
• データラベルのスタイルとテキストプロパティ

📄 参照: references/legend-tooltip.md

• 凡例の配置（上、下、左、右、カスタム）
• 凡例の配置揃えと形状のカスタマイズ
• 凡例のサイズとパディングの調整
• 系列の表示切り替え
• ツールチップの有効化と系列ごとのカスタマイズ

出力と機能強化

📄 参照: references/title-print-export.md

• タイトルとサブタイトルの追加およびスタイル設定
• スペースが限られたレイアウトに合わせたタイトルの省略
• ブラウザーからの Smith Chart の直接印刷
• 複数の形式（JPEG、PNG、SVG、PDF）へのエクスポート

📄 参照: references/accessibility.md

• WCAG 2.2 AA アクセシビリティ対応
• WAI-ARIA 属性とスクリーンリーダーのサポート
• キーボードナビゲーションのショートカット
• アクセシブルな実装の実現

クイックスタートの例

<ejs-smithchart id="smithchart">
    <e-smithchart-smithchartseriescollection>
        <e-smithchart-smithchartseries dataSource="TransmissionData" name="Transmission 1" resistance="resistance" reactance="reactance">
            <e-smithchartseries-marker visible="true">
                <e-series-marker-datalabel visible="true"></e-series-marker-datalabel>
            </e-smithchartseries-marker>
        </e-smithchart-smithchartseries>
    </e-smithchart-smithchartseriescollection>
</ejs-smithchart>

対応するデータモデルには、resistance と reactance のフィールドが含まれます。

よく使われるパターン

パターン 1：系列を 1 つ使った基本的なチャート

マーカーを有効にし、基本的なスタイルを設定して、系列を 1 つ含むスミスチャートを作成します。

パターン 2：凡例付きの複数系列

凡例で表示を切り替えたり、系列を識別したりできるようにして、複数の伝送線路系列を描画します。

パターン 3：インタラクティブなダッシュボード

ツールチップ、データラベル、カスタム軸設定、印刷／エクスポート機能を備えたダッシュボードを構築します。

パターン 4：レスポンシブレイアウト

パーセンテージによるサイズ指定を使用して、コンテナーの寸法に合わせて調整されるスミスチャートを実装します。

主なプロパティ

系列レベル：

• dataSource - 抵抗とリアクタンスを含むデータオブジェクトの配列
• points - 点の値を直接指定する配列
• fill - 系列の線の色
• opacity - 系列の不透明度
• width - 系列の線の太さ
• name - 凡例で使用する系列の識別名

軸レベル：

• labelPosition - 軸ラベルを内側または外側に配置
• labelIntersectAction - 重なり合うラベルを非表示
• visible - 軸の表示／非表示

凡例：

• visible - 凡例の有効化／無効化
• position - 上、下、左、右、カスタム
• alignment - 近端、中央、遠端

よくあるユースケース

1. RF 回路解析 - 伝送線路のパラメーターとインピーダンス整合をプロットします
2. ネットワーク解析 - S パラメーターと反射係数を可視化します
3. コンポーネントテスト - 高周波コンポーネントの測定データを表示します
4. 教育用ダッシュボード - インタラクティブな可視化を使って伝送線路理論を解説します
5. 技術レポート - ドキュメント用にエクスポート可能なスミスチャート図を生成します