syncfusion-wpf-smith-chart
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseImplementing Syncfusion WPF SmithCharts
实现Syncfusion WPF SmithChart
When to Use This Skill
何时使用此技能
Use this skill immediately when the user needs to:
- Implement a Syncfusion WPF SmithChart (SfSmithChart) component
- Visualize impedance or admittance data for transmission lines
- Create charts for high-frequency circuit applications
- Plot data with resistance (horizontal) and reactance (radial) axes
- Add line series with data markers and labels
- Configure dual-axis systems (resistance and reactance)
- Customize chart appearance, palettes, and themes
- Implement interactive features like tooltips
- Switch between Impedance and Admittance rendering types
- Work with legends for multiple series visualization
- Handle transmission line data visualization
当用户需要以下功能时,请立即使用此技能:
- 实现Syncfusion WPF SmithChart(SfSmithChart)组件
- 可视化传输线的阻抗或导纳数据
- 为高频电路应用创建图表
- 绘制带有电阻(水平)和电抗(径向)轴的数据
- 添加带有数据标记和标签的线系列
- 配置双轴系统(电阻和电抗)
- 自定义图表的外观、调色板和主题
- 实现交互功能如工具提示
- 在阻抗和导纳渲染类型之间切换
- 使用图例进行多系列可视化
- 处理传输线数据可视化
Component Overview
组件概述
SfSmithChart is a specialized data visualization component for high-frequency circuit applications. It plots transmission line parameters using two sets of circles representing normalized resistance and reactance values.
Key Capabilities:
- Dual-Axis System: Horizontal (Resistance) and Radial (Reactance) axes
- Line Series Visualization: Plot data with customizable line series
- Data Markers: Multiple marker shapes with custom templates
- Data Labels: Automatic label positioning with collision detection
- Interactive Legend: Toggle series visibility, multiple positioning options
- Two Rendering Modes: Impedance (default) and Admittance
- Rich Customization: Palettes, colors, gridlines, axis styling
- Tooltips: Interactive tooltips with custom templates
- Animation Support: Smooth series animations
SfSmithChart是一款针对高频电路应用的专业数据可视化组件。它使用两组分别代表归一化电阻和电抗值的圆形来绘制传输线参数。
核心功能:
- 双轴系统:水平(电阻)和径向(电抗)轴
- 线系列可视化:使用可自定义的线系列绘制数据
- 数据标记:多种标记形状及自定义模板
- 数据标签:自动标签定位及碰撞检测
- 交互式图例:切换系列可见性,多种定位选项
- 两种渲染模式:阻抗(默认)和导纳
- 丰富的定制选项:调色板、颜色、网格线、轴样式
- 工具提示:带自定义模板的交互式工具提示
- 动画支持:流畅的系列动画
Documentation and Navigation Guide
文档与导航指南
Getting Started and Installation
入门与安装
📄 Read: references/getting-started.md
Read this when the user needs to:
- Install and set up the SmithChart component
- Create a SmithChart from XAML or code-behind
- Add assembly references (Syncfusion.SfSmithChart.WPF)
- Initialize the chart with basic configuration
- Create data models for transmission line data
- Add header, axes, series, and legend
- Apply themes (SfSkinManager)
- See complete working examples
📄 阅读: references/getting-started.md
当用户需要以下内容时阅读:
- 安装并设置SmithChart组件
- 从XAML或代码后置创建SmithChart
- 添加程序集引用(Syncfusion.SfSmithChart.WPF)
- 使用基本配置初始化图表
- 为传输线数据创建数据模型
- 添加页眉、轴、系列和图例
- 应用主题(SfSkinManager)
- 查看完整的工作示例
Series Configuration
系列配置
📄 Read: references/series-configuration.md
Read this when the user needs to:
- Configure LineSeries for data visualization
- Set up data binding (ItemsSource, ResistancePath, ReactancePath)
- Customize series appearance (Interior, StrokeThickness)
- Enable series animation (EnableAnimation, AnimationDuration)
- Control series visibility programmatically
- Handle multiple series in one chart
- Customize data plotting order (ArrangeByIndex)
- Apply series-specific palettes
📄 阅读: references/series-configuration.md
当用户需要以下内容时阅读:
- 配置LineSeries以进行数据可视化
- 设置数据绑定(ItemsSource、ResistancePath、ReactancePath)
- 自定义系列外观(Interior、StrokeThickness)
- 启用系列动画(EnableAnimation、AnimationDuration)
- 以编程方式控制系列可见性
- 在一个图表中处理多个系列
- 自定义数据绘制顺序(ArrangeByIndex)
- 应用系列专属调色板
Axes Configuration
轴配置
📄 Read: references/axes-configuration.md
Read this when the user needs to:
- Configure Horizontal Axis (Resistance) properties
- Configure Radial Axis (Reactance) properties
- Customize major and minor gridlines
- Control gridline visibility and count
- Style axis lines and gridlines
- Position axis labels (Inside/Outside)
- Handle label intersection and overlap
- Respond to axis label events (LabelCreated)
📄 阅读: references/axes-configuration.md
当用户需要以下内容时阅读:
- 配置水平轴(电阻)属性
- 配置径向轴(电抗)属性
- 自定义主要和次要网格线
- 控制网格线的可见性和数量
- 设置轴线条和网格线的样式
- 定位轴标签(内部/外部)
- 处理标签交叉与重叠
- 响应轴标签事件(LabelCreated)
Data Markers and Labels
数据标记与标签
📄 Read: references/data-markers-and-labels.md
Read this when the user needs to:
- Add markers to data points (ShowMarker, MarkerType)
- Use built-in marker shapes (Circle, Rectangle, Diamond, etc.)
- Customize marker size, color, and stroke
- Create custom marker templates
- Enable data labels (ShowLabel)
- Handle automatic label positioning and collision
- Style data labels (LabelStyle)
- Create custom label templates (LabelTemplate)
📄 阅读: references/data-markers-and-labels.md
当用户需要以下内容时阅读:
- 为数据点添加标记(ShowMarker、MarkerType)
- 使用内置标记形状(圆形、矩形、菱形等)
- 自定义标记的大小、颜色和描边
- 创建自定义标记模板
- 启用数据标签(ShowLabel)
- 处理自动标签定位和碰撞
- 设置数据标签样式(LabelStyle)
- 创建自定义标签模板(LabelTemplate)
Legend and Appearance
图例与外观
📄 Read: references/legend-and-appearance.md
Read this when the user needs to:
- Add and configure chart legend
- Position legend (Docked or Floating)
- Customize legend icons and appearance
- Toggle series visibility from legend
- Apply color palettes (Metro, BlueChrome, etc.)
- Customize chart area (Background, BorderBrush)
- Set series-specific palettes
- Control circle radius
- Get chart properties (AreaBounds, CenterPoint, Radius)
- Style legend items (FontSize, colors, spacing)
📄 阅读: references/legend-and-appearance.md
当用户需要以下内容时阅读:
- 添加并配置图表图例
- 定位图例(停靠或浮动)
- 自定义图例图标和外观
- 从图例切换系列可见性
- 应用颜色调色板(Metro、BlueChrome等)
- 自定义图表区域(Background、BorderBrush)
- 设置系列专属调色板
- 控制圆形半径
- 获取图表属性(AreaBounds、CenterPoint、Radius)
- 设置图例项样式(FontSize、颜色、间距)
Rendering Types and User Interactions
渲染类型与用户交互
📄 Read: references/rendering-and-interactions.md
Read this when the user needs to:
- Understand Impedance vs Admittance rendering
- Switch rendering types (RenderingType property)
- Enable tooltips for data points (ShowToolTip)
- Configure tooltip duration
- Create custom tooltip templates
- Implement interactive features
📄 阅读: references/rendering-and-interactions.md
当用户需要以下内容时阅读:
- 理解阻抗与导纳渲染的区别
- 切换渲染类型(RenderingType属性)
- 为数据点启用工具提示(ShowToolTip)
- 配置工具提示持续时间
- 创建自定义工具提示模板
- 实现交互功能
Quick Start Example
快速入门示例
Here's a minimal example to create a functional SmithChart with transmission line data:
以下是创建带有传输线数据的功能性SmithChart的最简示例:
XAML Approach
XAML方式
xml
<Window xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.SmithChart;assembly=Syncfusion.SfSmithChart.WPF">
<Grid>
<syncfusion:SfSmithChart Header="Impedance Transmission" Height="400" Width="500">
<!-- LineSeries with data binding -->
<syncfusion:LineSeries ResistancePath="Resistance"
ReactancePath="Reactance"
ItemsSource="{Binding Data}"
Label="TransmissionLine"
ShowMarker="True">
</syncfusion:LineSeries>
<!-- Horizontal (Resistance) Axis -->
<syncfusion:SfSmithChart.HorizontalAxis>
<syncfusion:HorizontalAxis FontSize="11"/>
</syncfusion:SfSmithChart.HorizontalAxis>
<!-- Radial (Reactance) Axis -->
<syncfusion:SfSmithChart.RadialAxis>
<syncfusion:RadialAxis FontSize="11"/>
</syncfusion:SfSmithChart.RadialAxis>
<!-- Legend -->
<syncfusion:SfSmithChart.Legend>
<syncfusion:SmithChartLegend/>
</syncfusion:SfSmithChart.Legend>
</syncfusion:SfSmithChart>
</Grid>
</Window>xml
<Window xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.SmithChart;assembly=Syncfusion.SfSmithChart.WPF">
<Grid>
<syncfusion:SfSmithChart Header="Impedance Transmission" Height="400" Width="500">
<!-- LineSeries with data binding -->
<syncfusion:LineSeries ResistancePath="Resistance"
ReactancePath="Reactance"
ItemsSource="{Binding Data}"
Label="TransmissionLine"
ShowMarker="True">
</syncfusion:LineSeries>
<!-- Horizontal (Resistance) Axis -->
<syncfusion:SfSmithChart.HorizontalAxis>
<syncfusion:HorizontalAxis FontSize="11"/>
</syncfusion:SfSmithChart.HorizontalAxis>
<!-- Radial (Reactance) Axis -->
<syncfusion:SfSmithChart.RadialAxis>
<syncfusion:RadialAxis FontSize="11"/>
</syncfusion:SfSmithChart.RadialAxis>
<!-- Legend -->
<syncfusion:SfSmithChart.Legend>
<syncfusion:SmithChartLegend/>
</syncfusion:SfSmithChart.Legend>
</syncfusion:SfSmithChart>
</Grid>
</Window>Code-Behind Approach
代码后置方式
csharp
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;csharp
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;Data Model
数据模型
csharp
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 }
};csharp
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 }
};Common Patterns
常见模式
Pattern 1: Multiple Series Comparison
模式1:多系列对比
csharp
// 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);csharp
// 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);Pattern 2: Enhanced Visual Feedback
模式2:增强视觉反馈
csharp
// 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;csharp
// 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;Pattern 3: Custom Appearance
模式3:自定义外观
csharp
// 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 areacsharp
// 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 areaPattern 4: Admittance Rendering
模式4:导纳渲染
csharp
// Switch to Admittance mode for different visualization
chart.RenderingType = RenderingType.Admittance;
// Data is now rendered from left to rightcsharp
// Switch to Admittance mode for different visualization
chart.RenderingType = RenderingType.Admittance;
// Data is now rendered from left to rightKey Properties
核心属性
SfSmithChart Core Properties
SfSmithChart核心属性
| Property | Type | Description |
|---|---|---|
| object | Chart title/header text |
| HorizontalAxis | Resistance axis configuration |
| RadialAxis | Reactance axis configuration |
| ObservableCollection | Collection of chart series |
| SmithChartLegend | Legend configuration |
| RenderingType | Impedance or Admittance mode |
| double | Chart circle radius (0.1 to 1) |
| SmithChartColorModel | Palette and color settings |
| Brush | Chart plotting area background |
| 属性 | 类型 | 描述 |
|---|---|---|
| object | 图表标题/页眉文本 |
| HorizontalAxis | 电阻轴配置 |
| RadialAxis | 电抗轴配置 |
| ObservableCollection | 图表系列集合 |
| SmithChartLegend | 图例配置 |
| RenderingType | 阻抗或导纳模式 |
| double | 图表圆形半径(0.1至1) |
| SmithChartColorModel | 调色板和颜色设置 |
| Brush | 图表绘图区域背景 |
LineSeries Key Properties
LineSeries核心属性
| Property | Type | Description |
|---|---|---|
| IEnumerable | Data source for the series |
| string | Property path for resistance values |
| string | Property path for reactance values |
| string | Series name (shows in legend) |
| Brush | Line color |
| double | Line thickness |
| bool | Display markers at data points |
| MarkerType | Marker shape (Circle, Rectangle, etc.) |
| bool | Enable tooltips on hover |
| bool | Animate series on load |
| bool | Show/hide series |
| 属性 | 类型 | 描述 |
|---|---|---|
| IEnumerable | 系列的数据源 |
| string | 电阻值的属性路径 |
| string | 电抗值的属性路径 |
| string | 系列名称(显示在图例中) |
| Brush | 线条颜色 |
| double | 线条粗细 |
| bool | 在数据点显示标记 |
| MarkerType | 标记形状(圆形、矩形等) |
| bool | 悬停时启用工具提示 |
| bool | 加载时启用系列动画 |
| bool | 显示/隐藏系列 |
Axis Common Properties
轴通用属性
| Property | Type | Description |
|---|---|---|
| bool | Display major gridlines |
| bool | Display minor gridlines |
| int | Number of minor gridlines (default: 8) |
| Style | Style for major gridlines |
| Style | Style for minor gridlines |
| bool | Display axis line |
| Style | Style for axis line |
| LabelPlacement | Inside or Outside positioning |
| LabelIntersectActions | Handle overlapping labels (Hide/None) |
| 属性 | 类型 | 描述 |
|---|---|---|
| bool | 显示主要网格线 |
| bool | 显示次要网格线 |
| int | 次要网格线数量(默认:8) |
| Style | 主要网格线样式 |
| Style | 次要网格线样式 |
| bool | 显示轴线 |
| Style | 轴线样式 |
| LabelPlacement | 内部或外部定位 |
| LabelIntersectActions | 处理重叠标签(隐藏/不处理) |
Common Use Cases
常见用例
Use Case 1: Basic Transmission Line Visualization
用例1:基础传输线可视化
Goal: Display impedance data for a transmission line
Approach:
- Create data model with Resistance and Reactance properties
- Set up basic SmithChart with header
- Add LineSeries with data binding
- Configure both axes
- Add legend for reference
Reference: See getting-started.md
目标:显示传输线的阻抗数据
方法:
- 创建包含Resistance和Reactance属性的数据模型
- 设置带页眉基本SmithChart
- 添加带数据绑定的LineSeries
- 配置两个轴
- 添加图例作为参考
参考:查看 getting-started.md
Use Case 2: Comparing Multiple Transmission Lines
用例2:对比多条传输线
Goal: Compare impedance characteristics of different transmission lines
Approach:
- Add multiple LineSeries with different ItemsSource
- Assign unique Label to each series
- Use different Interior colors for distinction
- Enable legend for series identification
- Consider using markers for clarity
Reference: See series-configuration.md and legend-and-appearance.md
目标:对比不同传输线的阻抗特性
方法:
- 添加多个带有不同ItemsSource的LineSeries
- 为每个系列分配唯一的Label
- 使用不同的Interior颜色进行区分
- 启用图例以识别系列
- 考虑使用标记以提高清晰度
参考:查看 series-configuration.md 和 legend-and-appearance.md
Use Case 3: Detailed Data Point Analysis
用例3:详细数据点分析
Goal: Provide detailed information about each data point
Approach:
- Enable ShowMarker for visual data points
- Enable data labels (DataLabel.ShowLabel)
- Configure tooltips (ShowToolTip)
- Customize marker and label appearance
- Consider custom templates for specialized information
Reference: See data-markers-and-labels.md and rendering-and-interactions.md
目标:提供每个数据点的详细信息
方法:
- 启用ShowMarker以显示可视化数据点
- 启用数据标签(DataLabel.ShowLabel)
- 配置工具提示(ShowToolTip)
- 自定义标记和标签外观
- 考虑为特殊信息使用自定义模板
参考:查看 data-markers-and-labels.md 和 rendering-and-interactions.md
Use Case 4: Admittance Analysis
用例4:导纳分析
Goal: Visualize admittance instead of impedance
Approach:
- Set RenderingType to Admittance
- Data automatically renders left to right
- Axis labels adjust automatically
- All other features remain available
Reference: See rendering-and-interactions.md
目标:可视化导纳而非阻抗
方法:
- 将RenderingType设置为Admittance
- 数据将自动从左到右渲染
- 轴标签将自动调整
- 所有其他功能保持可用
参考:查看 rendering-and-interactions.md
Use Case 5: Professional Report Visualization
用例5:专业报告可视化
Goal: Create publication-ready SmithChart with custom branding
Approach:
- Apply custom ColorModel palette
- Customize chart area and background colors
- Style axes with custom gridline styles
- Configure legend with custom icons
- Adjust Radius for optimal sizing
- Apply themes using SfSkinManager
Reference: See legend-and-appearance.md and getting-started.md
目标:创建带有自定义品牌的可发布SmithChart
方法:
- 应用自定义ColorModel调色板
- 自定义图表区域和背景颜色
- 使用自定义网格线样式设置轴样式
- 配置带自定义图标的图例
- 调整Radius以获得最佳尺寸
- 使用SfSkinManager应用主题
参考:查看 legend-and-appearance.md 和 getting-started.md
Edge Cases and Troubleshooting
边缘情况与故障排除
Assembly Reference Issues
程序集引用问题
- Ensure Syncfusion.SfSmithChart.WPF assembly is properly referenced
- Check .NET Framework version compatibility
- Verify xmlns namespace declaration in XAML
- 确保正确引用Syncfusion.SfSmithChart.WPF程序集
- 检查.NET Framework版本兼容性
- 验证XAML中的xmlns命名空间声明
Data Not Displaying
数据未显示
- Verify ItemsSource is properly bound
- Check ResistancePath and ReactancePath match property names exactly
- Ensure DataContext is set for data binding
- Verify data collection is not empty
- 验证ItemsSource是否正确绑定
- 检查ResistancePath和ReactancePath是否与属性名称完全匹配
- 确保已设置DataContext以进行数据绑定
- 验证数据集合不为空
Overlapping Labels
标签重叠
- Use LabelIntersectAction property to control overlap behavior
- Labels automatically reposition when ShowLabel is true
- Consider reducing data points or adjusting label templates
- 使用LabelIntersectAction属性控制重叠行为
- 当ShowLabel为true时,标签会自动重新定位
- 考虑减少数据点或调整标签模板
Performance with Large Datasets
大数据集的性能问题
- Use ArrangeByIndex = false for sorted data (default behavior)
- Enable animation selectively for better initial load
- Consider data sampling for extremely large datasets
- 对于已排序数据,使用ArrangeByIndex = false(默认行为)
- 选择性启用动画以优化初始加载
- 对于极大数据集,考虑数据采样
Summary
总结
The Syncfusion WPF SmithChart is a specialized component for high-frequency circuit applications, particularly for visualizing transmission line impedance and admittance data. It features a dual-axis system, rich customization options, and interactive features suitable for engineering and scientific applications. Always start with the getting-started reference for initial setup, then explore specific features as needed for your use case.
Syncfusion WPF SmithChart是一款针对高频电路应用的专业组件,特别适用于可视化传输线的阻抗和导纳数据。它具备双轴系统、丰富的定制选项和交互功能,适用于工程和科学应用。初始设置请始终从入门参考开始,然后根据您的用例探索特定功能。