syncfusion-wpf-smith-chart

Syncfusion WPF SmithCharts の実装

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

ユーザーが次のことを必要としている場合は、すぐにこのスキルを使用してください。

• Syncfusion WPF SmithChart（SfSmithChart）コンポーネントを実装する
• 伝送線路のインピーダンスまたはアドミタンスデータを可視化する
• 高周波回路アプリケーション向けのチャートを作成する
• 抵抗（水平）軸とリアクタンス（放射）軸を使用してデータをプロットする
• データマーカーとラベルを含む折れ線系列を追加する
• 二軸システム（抵抗とリアクタンス）を構成する
• チャートの外観、パレット、テーマをカスタマイズする
• ツールチップなどのインタラクティブ機能を実装する
• インピーダンスとアドミタンスの描画タイプを切り替える
• 複数の系列を可視化するための凡例を扱う
• 伝送線路データの可視化に対応する

コンポーネントの概要

SfSmithChart は、高周波回路アプリケーション向けの専用データ可視化コンポーネントです。正規化された抵抗値とリアクタンス値を表す2組の円を使用して、伝送線路のパラメーターをプロットします。

主な機能：

• 二軸システム：水平（抵抗）軸と放射（リアクタンス）軸
• 折れ線系列の可視化：カスタマイズ可能な折れ線系列でデータをプロット
• データマーカー：カスタムテンプレートに対応した複数のマーカー形状
• データラベル：重なり検出機能を備えた自動ラベル配置
• インタラクティブな凡例：系列の表示切り替え、複数の配置オプション
• 2つの描画モード：インピーダンス（既定）とアドミタンス
• 豊富なカスタマイズ：パレット、色、グリッド線、軸のスタイル設定
• ツールチップ：カスタムテンプレートに対応したインタラクティブなツールチップ
• アニメーション対応：系列の滑らかなアニメーション

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

はじめにとインストール

📄 参照： references/getting-started.md

ユーザーが次のことを必要としている場合に参照してください。

• SmithChart コンポーネントをインストールしてセットアップする
• XAML またはコードビハインドから SmithChart を作成する
• アセンブリ参照（Syncfusion.SfSmithChart.WPF）を追加する
• 基本的な設定でチャートを初期化する
• 伝送線路データのデータモデルを作成する
• ヘッダー、軸、系列、凡例を追加する
• テーマ（SfSkinManager）を適用する
• 完全な動作例を確認する

系列の構成

📄 参照： references/series-configuration.md

ユーザーが次のことを必要としている場合に参照してください。

• データ可視化用に LineSeries を構成する
• データバインディング（ItemsSource、ResistancePath、ReactancePath）を設定する
• 系列の外観（Interior、StrokeThickness）をカスタマイズする
• 系列アニメーション（EnableAnimation、AnimationDuration）を有効にする
• プログラムから系列の表示状態を制御する
• 1つのチャートで複数の系列を扱う
• データのプロット順（ArrangeByIndex）をカスタマイズする
• 系列固有のパレットを適用する

軸の構成

📄 参照： references/axes-configuration.md

ユーザーが次のことを必要としている場合に参照してください。

• 水平軸（抵抗）のプロパティを構成する
• 放射軸（リアクタンス）のプロパティを構成する
• 主グリッド線と補助グリッド線をカスタマイズする
• グリッド線の表示と本数を制御する
• 軸線とグリッド線のスタイルを設定する
• 軸ラベルの位置（内側／外側）を設定する
• ラベルの交差や重なりに対応する
• 軸ラベルのイベント（LabelCreated）に応答する

データマーカーとラベル

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

ユーザーが次のことを必要としている場合に参照してください。

• データポイントにマーカーを追加する（ShowMarker、MarkerType）
• 組み込みのマーカー形状（Circle、Rectangle、Diamond など）を使用する
• マーカーのサイズ、色、線をカスタマイズする
• カスタムマーカーテンプレートを作成する
• データラベル（ShowLabel）を有効にする
• ラベルの自動配置と重なりへの対応を行う
• データラベル（LabelStyle）のスタイルを設定する
• カスタムラベルテンプレート（LabelTemplate）を作成する

凡例と外観

📄 参照： references/legend-and-appearance.md

ユーザーが次の操作を行う必要がある場合に参照してください：

• グラフの凡例を追加および設定する
• 凡例の位置を指定する（ドッキングまたはフローティング）
• 凡例のアイコンと外観をカスタマイズする
• 凡例から系列の表示を切り替える
• カラーパレット（Metro、BlueChrome など）を適用する
• グラフ領域（Background、BorderBrush）をカスタマイズする
• 系列ごとにパレットを設定する
• 円の半径を制御する
• グラフのプロパティ（AreaBounds、CenterPoint、Radius）を取得する
• 凡例項目のスタイルを設定する（FontSize、色、間隔）

描画タイプとユーザー操作

📄 参照： references/rendering-and-interactions.md

ユーザーが次の操作を行う必要がある場合に参照してください：

• インピーダンス描画とアドミタンス描画を理解する
• 描画タイプを切り替える（RenderingType プロパティ）
• データポイントのツールチップを有効にする（ShowToolTip）
• ツールチップの表示時間を設定する
• カスタムツールチップテンプレートを作成する
• インタラクティブな機能を実装する

クイックスタートの例

伝送線路データを使用して、機能する SmithChart を作成する最小限の例を紹介します。

XAML での方法

<Window xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.SmithChart;assembly=Syncfusion.SfSmithChart.WPF">
    <Grid>
        <syncfusion:SfSmithChart Header="Impedance Transmission" Height="400" Width="500">
            
            <syncfusion:LineSeries ResistancePath="Resistance" 
                                   ReactancePath="Reactance" 
                                   ItemsSource="{Binding Data}" 
                                   Label="TransmissionLine"
                                   ShowMarker="True">
            </syncfusion:LineSeries>
            
            
            <syncfusion:SfSmithChart.HorizontalAxis>
                <syncfusion:HorizontalAxis FontSize="11"/>
            </syncfusion:SfSmithChart.HorizontalAxis>
            
            
            <syncfusion:SfSmithChart.RadialAxis>
                <syncfusion:RadialAxis FontSize="11"/>
            </syncfusion:SfSmithChart.RadialAxis>
            
            
            <syncfusion:SfSmithChart.Legend>
                <syncfusion:SmithChartLegend/>
            </syncfusion:SfSmithChart.Legend>
        </syncfusion:SfSmithChart>
    </Grid>
</Window>

コードビハインドでの方法

using Syncfusion.UI.Xaml.SmithChart;

// Create SmithChart
SfSmithChart chart = new SfSmithChart();
chart.Header = "Impedance Transmission";

// Configure axes
chart.HorizontalAxis = new HorizontalAxis { FontSize = 11 };
chart.RadialAxis = new RadialAxis { FontSize = 11 };

// Add series
LineSeries series = new LineSeries
{
    ItemsSource = Data,
    ResistancePath = "Resistance",
    ReactancePath = "Reactance",
    Label = "TransmissionLine",
    ShowMarker = true
};
chart.Series.Add(series);

// Add legend
chart.Legend = new SmithChartLegend();

// Add to layout
this.Content = chart;

データモデル

public class TransmissionData
{
    public double Resistance { get; set; }
    public double Reactance { get; set; }
}

// Sample data
ObservableCollection<TransmissionData> Data = new ObservableCollection<TransmissionData>
{
    new TransmissionData { Resistance = 0, Reactance = 0.05 },
    new TransmissionData { Resistance = 0.3, Reactance = 0.1 },
    new TransmissionData { Resistance = 1.0, Reactance = 0.4 },
    new TransmissionData { Resistance = 2.0, Reactance = 0.5 }
};

よく使われるパターン

パターン 1：複数系列の比較

// Add multiple series for comparison
LineSeries series1 = new LineSeries
{
    ItemsSource = Data1,
    ResistancePath = "Resistance",
    ReactancePath = "Reactance",
    Label = "Transmission-1",
    ShowMarker = true
};

LineSeries series2 = new LineSeries
{
    ItemsSource = Data2,
    ResistancePath = "Resistance",
    ReactancePath = "Reactance",
    Label = "Transmission-2",
    ShowMarker = true,
    Interior = new SolidColorBrush(Colors.Orange)
};

chart.Series.Add(series1);
chart.Series.Add(series2);

パターン 2：視覚的なフィードバックの強化

// Series with markers, labels, and tooltip
LineSeries series = new LineSeries
{
    ShowMarker = true,
    MarkerType = MarkerType.Circle,
    MarkerHeight = 10,
    MarkerWidth = 10,
    ShowToolTip = true,
    ToolTipDuration = TimeSpan.FromSeconds(3),
    StrokeThickness = 2,
    EnableAnimation = true,
    AnimationDuration = TimeSpan.FromSeconds(1)
};

series.DataLabel.ShowLabel = true;

パターン 3：外観のカスタマイズ

// Apply custom palette and styling
chart.ColorModel = new SmithChartColorModel
{
    Palette = ColorPalette.BlueChrome
};

chart.Background = new SolidColorBrush(Colors.WhiteSmoke);
chart.ChartAreaBackground = new SolidColorBrush(Colors.White);
chart.ChartAreaBorderBrush = new SolidColorBrush(Colors.Gray);
chart.ChartAreaBorderThickness = new Thickness(1);
chart.Radius = 0.9; // 90% of plot area

パターン 4：アドミタンス描画

// Switch to Admittance mode for different visualization
chart.RenderingType = RenderingType.Admittance;
// Data is now rendered from left to right

主なプロパティ

SfSmithChart の主要プロパティ

プロパティ	型	説明
Header	object	グラフのタイトル／ヘッダーテキスト
HorizontalAxis	HorizontalAxis	抵抗軸の設定
RadialAxis	RadialAxis	リアクタンス軸の設定
Series	ObservableCollection	グラフ系列のコレクション
Legend	SmithChartLegend	凡例の設定
RenderingType	RenderingType	インピーダンスまたはアドミタンスモード
Radius	double	グラフ円の半径（0.1～1）
ColorModel	SmithChartColorModel	パレットと色の設定
ChartAreaBackground	Brush	グラフ描画領域の背景

LineSeries の主要プロパティ

プロパティ	型	説明
ItemsSource	IEnumerable	系列のデータソース
ResistancePath	string	抵抗値のプロパティパス
ReactancePath	string	リアクタンス値のプロパティパス
Label	string	系列名（凡例に表示）
Interior	Brush	線の色
StrokeThickness	double	線の太さ
ShowMarker	bool	データポイントにマーカーを表示
MarkerType	MarkerType	マーカーの形状（Circle、Rectangle など）
ShowToolTip	bool	ホバー時のツールチップを有効化
EnableAnimation	bool	読み込み時に系列をアニメーション表示
IsSeriesVisible	bool	系列の表示／非表示

軸の共通プロパティ

プロパティ	型	説明
ShowMajorGridlines	bool	主グリッド線を表示
ShowMinorGridlines	bool	補助グリッド線を表示
MinorGridlinesCount	int	補助グリッド線の数（既定値：8）
MajorGridlineStyle	Style	主グリッド線のスタイル
MinorGridlineStyle	Style	補助グリッド線のスタイル
ShowAxisLine	bool	軸線を表示
AxisLineStyle	Style	軸線のスタイル
LabelPlacement	LabelPlacement	内側または外側への配置
LabelIntersectAction	LabelIntersectActions	ラベルの重なりへの対処（Hide／None）

よくある使用例

使用例 1：伝送線路の基本的な可視化

目的：伝送線路のインピーダンスデータを表示する

方法：

• Resistance プロパティと Reactance プロパティを持つデータモデルを作成する
• ヘッダーを設定した基本的な SmithChart を構成する
• データバインディングで LineSeries を追加する
• 両方の軸を設定する
• 参照用に凡例を追加する

参照先：getting-started.md

ユースケース 2：複数の伝送線路の比較

目標：異なる伝送線路のインピーダンス特性を比較します

方法：

• 異なる ItemsSource を持つ LineSeries を複数追加します
• 各シリーズに一意の Label を割り当てます
• 区別できるように異なる Interior の色を使用します
• シリーズを識別するために凡例を有効にします
• 見やすさのため、マーカーの使用を検討します

参考：series-configuration.md と legend-and-appearance.md を参照してください

ユースケース 3：データポイントの詳細な分析

目標：各データポイントの詳細情報を表示します

方法：

• 視覚的なデータポイントを表示するために ShowMarker を有効にします
• データラベル（DataLabel.ShowLabel）を有効にします
• ツールチップ（ShowToolTip）を設定します
• マーカーとラベルの外観をカスタマイズします
• 専門的な情報を表示する場合は、カスタムテンプレートの使用を検討します

参考：data-markers-and-labels.md と rendering-and-interactions.md を参照してください

ユースケース 4：アドミタンス分析

目標：インピーダンスの代わりにアドミタンスを可視化します

方法：

• RenderingType を Admittance に設定します
• データは自動的に左から右へ描画されます
• 軸ラベルは自動的に調整されます
• その他のすべての機能は引き続き使用できます

参考：rendering-and-interactions.md を参照してください

ユースケース 5：プロフェッショナルなレポートの可視化

目標：カスタムブランディングを適用した、出版に適した SmithChart を作成します

方法：

• カスタム ColorModel パレットを適用します
• チャート領域と背景色をカスタマイズします
• カスタムのグリッド線スタイルで軸をスタイル設定します
• カスタムアイコンで凡例を設定します
• 最適なサイズになるよう Radius を調整します
• SfSkinManager を使用してテーマを適用します

参考：legend-and-appearance.md と getting-started.md を参照してください

エッジケースとトラブルシューティング

アセンブリ参照の問題

• Syncfusion.SfSmithChart.WPF アセンブリが正しく参照されていることを確認します
• .NET Framework のバージョンとの互換性を確認します
• XAML の xmlns 名前空間宣言を確認します

データが表示されない

• ItemsSource が正しくバインドされていることを確認します
• ResistancePath と ReactancePath がプロパティ名と完全に一致していることを確認します
• データバインディング用に DataContext が設定されていることを確認します
• データコレクションが空でないことを確認します

ラベルの重なり

• LabelIntersectAction プロパティを使用して、重なり方を制御します
• ShowLabel が true の場合、ラベルは自動的に再配置されます
• データポイントを減らすか、ラベルテンプレートを調整することを検討します

大規模なデータセットでのパフォーマンス

• ソート済みデータには ArrangeByIndex = false を使用します（デフォルトの動作）
• 初回読み込みを高速化するため、アニメーションを選択的に有効にします
• 非常に大きなデータセットでは、データのサンプリングを検討します

まとめ

Syncfusion WPF SmithChart は、高周波回路アプリケーション向けの専用コンポーネントであり、特に伝送線路のインピーダンスおよびアドミタンスデータの可視化に適しています。2 軸システム、豊富なカスタマイズオプション、エンジニアリングや科学分野のアプリケーションに適したインタラクティブ機能を備えています。初期設定では必ず getting-started のリファレンスから始め、その後、ユースケースに必要な機能を確認してください。