syncfusion-blazor-smith-charts

スミスチャートの実装

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

Syncfusion Blazor スミスチャート（SfSmithChart）は、伝送線路のインピーダンス、RF 回路のパラメーター、アンテナのチューニングデータを可視化するための専用チャートコンポーネントです。円形グリッド上に複素インピーダンスまたはアドミタンスを表示するため、RF／マイクロ波工学の用途に欠かせません。このコンポーネントは Syncfusion.Blazor.Charts 名前空間にあり、系列、軸、凡例、タイトル、副題、ツールチップ、エクスポート／印刷、描画イベントのスミスチャート API を提供します。

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

次のようなニーズがある場合に、このスキルを使用してください。

• 伝送線路と RF 回路のインピーダンス整合を可視化する
• 反射係数（S パラメーター）をスミスチャート上にプロットする
• アンテナのチューニングと共振特性を解析する
• 複数の伝送線路や回路構成を表示する
• インピーダンス／アドミタンスの可視化に合わせて円形軸と放射軸をカスタマイズする
• マーカーとデータラベルを追加して、重要なインピーダンス点を強調する
• 凡例を有効にして、複数の系列を区別する
• 抵抗値とリアクタンス値を含むツールチップを表示する
• スミスチャートを画像形式にエクスポートしたり、ドキュメント用に印刷したりする
• 抵抗座標とリアクタンス座標を使用して RF 工学データを扱う

コンポーネントの概要

スミスチャートコンポーネントは、円形座標系上でデータポイントを線で結んだ系列として描画します。主な機能は次のとおりです。

• 2 軸システム： 水平軸（直線）と放射軸（円形経路）
• 系列の可視化： 複数の伝送線路や回路構成をプロット
• マーカーとデータラベル： カスタマイズ可能な形状とラベルで特定のインピーダンス点を強調
• スマートラベル： コネクター線との重なりを避けるようにラベルを自動配置
• 凡例のサポート： 系列名を表示し、表示／非表示を切り替え
• インタラクティブなツールチップ： ホバー時に抵抗値／リアクタンス値を表示
• エクスポートと印刷： チャートを PNG、JPEG、SVG、PDF として保存
• カスタマイズ： 色、フォント、枠線、スタイルを完全に制御
• レスポンシブデザイン： コンテナーの寸法に合わせて調整

コンポーネント： SfSmithChart（Syncfusion.Blazor.Charts 名前空間）

主な API：

• メインチャートの SfSmithChart
• インピーダンスまたはアドミタンスの描画を指定する RenderType
• イベントを関連付ける SmithChartEvents
• データバインディング用の SmithChartSeriesCollection と SmithChartSeries
• 軸の設定用の SmithChartHorizontalAxis と SmithChartRadialAxis
• 凡例の配置と書式設定用の SmithChartLegendSettings
• チャートの見出し用の SmithChartTitle と SmithChartSubtitle
• ポイント注釈用の SmithChartSeriesMarker、SmithChartSeriesDatalabel、SmithChartSeriesDataLabelBorder、SmithChartSeriesTooltip
• レイアウトとコンテナーのスタイル設定用の SmithChartBorder と SmithChartMargin

一般的な列挙型：

• RenderType
• SmithChartAlignment
• SmithChartLabelIntersectAction
• AxisLabelPosition
• LegendPosition
• Shape
• ExportType

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

API リファレンス

📄 参照： references/api-reference.md

スミスチャート API の信頼できる概要として、次の内容を参照してください。

• SfSmithChart のプロパティとメソッド
• スミスチャートのイベントとイベント引数
• 入れ子になったコンポーネント、クラス、列挙型

はじめに

📄 参照： references/getting-started.md

インストールと初期設定については、こちらから始めてください。

• Syncfusion.Blazor.SmithChart NuGet パッケージのインストール
• Blazor Server、WebAssembly、または Web App プロジェクトの設定
• サービスとテーマの参照の登録
• 基本的なデータバインディングを使った最初のスミスチャートの作成
• よくある設定の問題のトラブルシューティング

シリーズとデータバインディング

📄 参照： references/series-and-data-binding.md

データのバインド方法とシリーズの設定方法を学びます。

• Resistance プロパティと Reactance プロパティを使用したデータ構造の作成
• Fill、Opacity、Width、Visible を使用した SmithChartSeries の設定
• 比較のための複数のシリーズの追加
• 個々のシリーズの外観のカスタマイズ
• 複雑な伝送線路データの処理

軸の設定

📄 参照： references/axes-configuration.md

水平軸と放射軸を設定します。

• 水平軸（直線）と放射軸（円形）の違いの理解
• 軸ラベルのカスタマイズ（位置、フォント、交差の処理）
• 軸線のスタイルとグリッドの外観の設定
• ラベルの表示と配置（Inside／Outside）の制御
• フォントのカスタマイズ（FontFamily、FontWeight、FontStyle、Size、Color）

マーカーとデータラベル

📄 参照： references/markers-and-data-labels.md

シリーズのポイントに視覚的なマーカーとデータラベルを追加します。

• マーカーの形状（Circle、Rectangle、Triangle）の有効化とカスタマイズ
• マーカーのサイズ、色、不透明度、境界線の設定
• 抵抗値とリアクタンス値をデータラベルとして表示
• 重なりを避けるために接続線付きのスマートラベルを使用
• カスタムデータラベルテンプレートの作成

凡例の設定

📄 参照： references/legend-configuration.md

シリーズを識別するための凡例を表示し、カスタマイズします。

• 凡例の配置（Top、Bottom、Left、Right、Custom）
• 凡例の形状、色、境界線のカスタマイズ
• 凡例の配置とサイズの設定
• カスタムスタイルの凡例タイトルの追加
• 表示の切り替えを有効にして、シリーズの表示／非表示を切り替え
• 凡例を行と列に整理

ツールチップ

📄 参照： references/tooltips.md

データを調べるためのインタラクティブなツールチップを有効にします。

• ホバー時に抵抗値とリアクタンス値を表示
• ツールチップの外観（塗りつぶし色、不透明度、境界線）のカスタマイズ
• カスタムツールチップテンプレートの作成
• テンプレートで SmithChartPoint データにアクセス

チャートの寸法とタイトル

📄 参照： references/chart-dimensions-and-titles.md

チャートのサイズ、タイトル、レイアウトを設定します。

• チャートの幅と高さの設定（固定またはレスポンシブ）
• チャートのタイトルとサブタイトルの追加とスタイル設定
• マージンとパディングの設定
• 背景色のカスタマイズ
• レスポンシブな Smith チャートの作成

エクスポート、印刷、イベント、アクセシビリティ

📄 参照： references/export-print-events-accessibility.md

チャートをエクスポートし、イベントを処理して、アクセシビリティを確保します。

• PNG、JPEG、SVG、PDF 形式へのエクスポート
• ドキュメント作成のための Smith チャートの印刷
• コンポーネントイベントの処理（Loaded、SeriesRender、AxisLabelRendering、LegendRendering、TitleRendering、SubtitleRendering、TextRendering、TooltipRender、OnPrintComplete、OnExportComplete、SizeChanged）
• WCAG に準拠したアクセシブルなチャートの実装
• キーボードナビゲーションとスクリーンリーダーへの対応
• アクセシビリティ準拠のテスト

クイックスタートの例

伝送線路を表示する基本的な Smith チャートの例です。

@page "/smith-chart-basic"
@using Syncfusion.Blazor.Charts

<h3>Transmission Line Impedance</h3>

<SfSmithChart>
    <SmithChartSeriesCollection>
        <SmithChartSeries Name="Transmission Line 1" 
                          DataSource="@TransmissionData" 
                          Reactance="Reactance" 
                          Resistance="Resistance">
            <SmithChartSeriesMarker Visible="true"></SmithChartSeriesMarker>
        </SmithChartSeries>
    </SmithChartSeriesCollection>
</SfSmithChart>

@code {
    public class SmithChartData
    {
        public double? Resistance { get; set; }
        public double? Reactance { get; set; }
    }
    
    public List<SmithChartData> TransmissionData = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 10, Reactance = 25 },
        new SmithChartData { Resistance = 6, Reactance = 4.5 },
        new SmithChartData { Resistance = 3.5, Reactance = 1.6 },
        new SmithChartData { Resistance = 2, Reactance = 1.2 },
        new SmithChartData { Resistance = 1, Reactance = 0.8 },
        new SmithChartData { Resistance = 0, Reactance = 0.2 }
    };
}

一般的な使用例

RF インピーダンス整合の解析

@using Syncfusion.Blazor.Charts

<SfSmithChart Height="600px" Width="100%">
    <SmithChartTitle Text="Antenna Impedance Matching"></SmithChartTitle>
    <SmithChartLegendSettings Visible="true" Position="@Syncfusion.Blazor.Charts.LegendPosition.Bottom">
    </SmithChartLegendSettings>
    <SmithChartSeriesCollection>
        <SmithChartSeries Name="Before Matching" 
                          DataSource="@BeforeData" 
                          Reactance="Reactance" 
                          Resistance="Resistance"
                          Fill="#FF6B6B">
            <SmithChartSeriesMarker Visible="true" Shape="@Syncfusion.Blazor.Charts.Shape.Circle"></SmithChartSeriesMarker>
            <SmithChartSeriesTooltip Visible="true"></SmithChartSeriesTooltip>
        </SmithChartSeries>
        <SmithChartSeries Name="After Matching" 
                          DataSource="@AfterData" 
                          Reactance="Reactance" 
                          Resistance="Resistance"
                          Fill="#4ECDC4">
            <SmithChartSeriesMarker Visible="true" Shape="@Syncfusion.Blazor.Charts.Shape.Diamond"></SmithChartSeriesMarker>
            <SmithChartSeriesTooltip Visible="true"></SmithChartSeriesTooltip>
        </SmithChartSeries>
    </SmithChartSeriesCollection>
</SfSmithChart>

@code {
    public class SmithChartData
    {
        public double? Resistance { get; set; }
        public double? Reactance { get; set; }
    }

    public List<SmithChartData> BeforeData = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 10,  Reactance = 25 },
        new SmithChartData { Resistance = 6,   Reactance = 4.5 },
        new SmithChartData { Resistance = 3.5, Reactance = 1.6 },
        new SmithChartData { Resistance = 2,   Reactance = 1.2 },
        new SmithChartData { Resistance = 1,   Reactance = 0.8 },
        new SmithChartData { Resistance = 0,   Reactance = 0.2 }
    };

    public List<SmithChartData> AfterData = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 2.5, Reactance = 1.2 },
        new SmithChartData { Resistance = 2, Reactance = 0.8 },
        new SmithChartData { Resistance = 1.6, Reactance = 0.5 },
        new SmithChartData { Resistance = 1.3, Reactance = 0.3 },
        new SmithChartData { Resistance = 1.1, Reactance = 0.1 },
        new SmithChartData { Resistance = 1, Reactance = 0 }
    };
}

複数周波数の応答解析

@using Syncfusion.Blazor.Charts

<SfSmithChart>
    <SmithChartTitle Text="Frequency Sweep: 100MHz - 1GHz"></SmithChartTitle>
    <SmithChartLegendSettings Visible="true" Position="@Syncfusion.Blazor.Charts.LegendPosition.Right">
    </SmithChartLegendSettings>
    <SmithChartSeriesCollection>
        <SmithChartSeries Name="100MHz" DataSource="@Freq100Data" 
                          Reactance="Reactance" Resistance="Resistance" Width="2">
        </SmithChartSeries>
        <SmithChartSeries Name="500MHz" DataSource="@Freq500Data" 
                          Reactance="Reactance" Resistance="Resistance" Width="2">
        </SmithChartSeries>
        <SmithChartSeries Name="1GHz" DataSource="@Freq1000Data" 
                          Reactance="Reactance" Resistance="Resistance" Width="2">
        </SmithChartSeries>
    </SmithChartSeriesCollection>
</SfSmithChart>

@code {
    public class SmithChartData
    {
        public double? Resistance { get; set; }
        public double? Reactance { get; set; }
    }

    public List<SmithChartData> Freq100Data = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 10,  Reactance = 20 },
        new SmithChartData { Resistance = 8,   Reactance = 12 },
        new SmithChartData { Resistance = 6,   Reactance = 6 },
        new SmithChartData { Resistance = 4,   Reactance = 3 },
        new SmithChartData { Resistance = 2,   Reactance = 1.5 },
        new SmithChartData { Resistance = 1,   Reactance = 0.8 }
    };

    public List<SmithChartData> Freq500Data = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 8,   Reactance = 15 },
        new SmithChartData { Resistance = 6,   Reactance = 8 },
        new SmithChartData { Resistance = 4.5, Reactance = 4 },
        new SmithChartData { Resistance = 3,   Reactance = 2 },
        new SmithChartData { Resistance = 1.8, Reactance = 1 },
        new SmithChartData { Resistance = 1.2, Reactance = 0.4 }
    };

    public List<SmithChartData> Freq1000Data = new List<SmithChartData>
    {
        new SmithChartData { Resistance = 6,   Reactance = 10 },
        new SmithChartData { Resistance = 4.5, Reactance = 5 },
        new SmithChartData { Resistance = 3,   Reactance = 2.5 },
        new SmithChartData { Resistance = 2,   Reactance = 1.2 },
        new SmithChartData { Resistance = 1.2, Reactance = 0.5 },
        new SmithChartData { Resistance = 1, Reactance = 0 }
    };
}

主なプロパティ

プロパティ	型	説明	使用する場面
SmithChartSeriesCollection	Collection	すべての系列を格納するコンテナー	データを表示する場合は常に必要です
DataSource	IEnumerable	インピーダンスデータポイントのリスト	抵抗とリアクタンスのデータをバインドします
Resistance	string	抵抗値のプロパティ名	データモデルのプロパティにマッピングします
Reactance	string	リアクタンス値のプロパティ名	データモデルのプロパティにマッピングします
RenderType	Enum	インピーダンスまたはアドミタンスの描画を選択します	スミスチャートの座標の解釈を切り替えます
Radius	string	スミスチャートのプロット領域の半径	円形プロットのサイズを調整します
ElementSpacing	string	チャート要素間の間隔	コンパクトまたは高密度のレイアウトに調整します
Background	string	チャートの背景色	ホスト UI のテーマに合わせます
Theme	string	組み込みのスミスチャートテーマ	ビジュアルスタイルの一貫性を保ちます
ID	string	チャート要素の識別子	テストやスクリプトで役立ちます
SmithChartSeriesMarker	Component	マーカーの設定	データポイントを視覚的に強調します
SmithChartSeriesTooltip	Component	ツールチップの設定	ホバー時に値を表示します
SmithChartLegendSettings	Component	凡例の設定	複数の系列を識別します
SmithChartHorizontalAxis	Component	水平軸の設定	直線軸をカスタマイズします
SmithChartRadialAxis	Component	放射軸の設定	円形軸をカスタマイズします
Width	string	チャートの幅（px または %）	チャートの寸法を調整します
Height	string	チャートの高さ（px または %）	チャートの寸法を調整します

実装ワークフロー

1. パッケージをインストールする → Syncfusion.Blazor.SmithChart NuGet パッケージを追加します
2. サービスを登録する → Program.cs/Startup.cs にサービスを追加します
3. テーマを追加する → Syncfusion のテーマ CSS を参照します
4. データを準備する → Resistance プロパティと Reactance プロパティを持つデータを構成します
5. コンポーネントを追加する → Razor ページに <SfSmithChart> を配置します
6. 系列をバインドする → DataSource を使って SmithChartSeries を設定します
7. カスタマイズする → マーカー、ツールチップ、凡例、スタイルを追加します
8. テストする → データの可視化とインタラクティブ性を確認します

エッジケースと考慮事項

• データ範囲： スミスチャートは正規化されたインピーダンス（通常 0～∞）を表します。データが適切に正規化されていることを確認してください。
• 系列の表示状態： 多数の系列が重なり合う場合は、区別しやすい色を使用し、凡例から表示・非表示を切り替えてください。
• null 値： 欠損データを適切に処理するには、Resistance と Reactance に nullable double（double?）を使用してください。
• パフォーマンス： 大規模なデータセット（1 系列あたり 1000 ポイント超）は、描画に影響する場合があります。データのサンプリングを検討してください。
• レスポンシブデザイン： レスポンシブなレイアウトには、パーセンテージベースの Width/Height またはコンテナークエリを使用してください。
• アクセシビリティ： RF エンジニアリングアプリケーションでスクリーンリーダーをサポートするには、ツールチップと ARIA ラベルを必ず有効にしてください。

このコンポーネントを使用すべきでない場合

• 一般的な XY プロット： 標準的な直交座標プロットには、通常の Chart コンポーネントを使用してください。
• 金融データ： 時系列の金融データには、Stock Chart を使用してください。
• RF 以外のデータ： スミスチャートはインピーダンス／アドミタンスに特化しています。他の分野には適切なチャートタイプを使用してください。
• 3D インピーダンス： スミスチャートは 2D です。複雑な 3D RF の可視化には、別の手法が必要です。