syncfusion-blazor-smith-charts

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Smith Charts

实现Smith Chart

The Syncfusion Blazor Smith Chart (

SfSmithChart

) is a specialized charting component designed for visualizing transmission line impedance, RF circuit parameters, and antenna tuning data. It displays complex impedance or admittance on a circular grid, making it essential for RF/microwave engineering applications. The component lives in the

Syncfusion.Blazor.Charts

namespace and exposes the Smith Chart API surface for series, axes, legends, titles, subtitles, tooltips, export/print, and rendering events.

Syncfusion Blazor Smith Chart（

SfSmithChart

）是一个专门的图表组件，用于可视化传输线阻抗、RF电路参数和天线调谐数据。它在圆形网格上显示复阻抗或导纳，是RF/微波工程应用中必不可少的工具。该组件位于

Syncfusion.Blazor.Charts

命名空间下，提供了Smith Chart的API接口，支持系列、坐标轴、图例、标题、副标题、工具提示、导出/打印以及渲染事件等功能。

When to Use This Skill

何时使用此技能

Use this skill when the user needs to:

Visualize impedance matching for transmission lines and RF circuits
Plot reflection coefficients (S-parameters) on a Smith Chart
Analyze antenna tuning and resonance characteristics
Display multiple transmission lines or circuit configurations
Customize circular and radial axes for impedance/admittance visualization
Add markers and data labels to highlight critical impedance points
Enable legends to differentiate between multiple series
Show tooltips with resistance and reactance values
Export Smith Charts to image formats or print for documentation
Handle RF engineering data with resistance and reactance coordinates

当用户需要以下功能时，可使用此技能：

可视化传输线和RF电路的阻抗匹配
在Smith Chart上绘制反射系数（S参数）
分析天线调谐和谐振特性
显示多条传输线或多种电路配置
自定义用于阻抗/导纳可视化的圆形和径向坐标轴
添加标记和数据标签以突出关键阻抗点
启用图例以区分多个系列
显示带有电阻和电抗值的工具提示
将Smith Chart导出为图像格式或打印用于文档记录
处理包含电阻和电抗坐标的RF工程数据

Component Overview

组件概述

The Smith Chart component renders data points as a series connected by lines on a circular coordinate system. Key capabilities include:

Two-axis system: Horizontal axis (straight line) and radial axis (circular path)
Series visualization: Plot multiple transmission lines or circuit configurations
Markers and data labels: Highlight specific impedance points with customizable shapes and labels
Smart labels: Automatically position labels to avoid overlaps with connector lines
Legend support: Display series names with toggle visibility
Interactive tooltips: Show resistance/reactance values on hover
Export and print: Save charts as PNG, JPEG, SVG, or PDF
Customization: Full control over colors, fonts, borders, and styling
Responsive design: Adapts to container dimensions

Component:

SfSmithChart

(Syncfusion.Blazor.Charts namespace)

Core API surface:

```
SfSmithChart
```
for the main chart
```
RenderType
```
for impedance or admittance rendering
```
SmithChartEvents
```
for event wiring

SmithChartSeriesCollection

and

SmithChartSeries

for data binding

SmithChartHorizontalAxis

and

SmithChartRadialAxis

for axis configuration

```
SmithChartLegendSettings
```
for legend placement and formatting
```
SmithChartTitle
```
and
```
SmithChartSubtitle
```
for chart headings

SmithChartSeriesMarker

SmithChartSeriesDatalabel

SmithChartSeriesDataLabelBorder

, and

SmithChartSeriesTooltip

for point annotations

```
SmithChartBorder
```
and
```
SmithChartMargin
```
for layout and container styling

Common enum types:

```
RenderType
```
```
SmithChartAlignment
```
```
SmithChartLabelIntersectAction
```
```
AxisLabelPosition
```
```
LegendPosition
```
```
Shape
```
```
ExportType
```

Smith Chart组件将数据点渲染为圆形坐标系上由线条连接的系列。核心功能包括：

双轴系统：水平轴（直线）和径向轴（圆形路径）
系列可视化：绘制多条传输线或多种电路配置
标记和数据标签：使用可自定义的形状和标签突出特定阻抗点
智能标签：自动调整标签位置以避免与连接线重叠
图例支持：显示系列名称并支持切换可见性
交互式工具提示：悬停时显示电阻/电抗值
导出和打印：将图表保存为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
```

Documentation and Navigation Guide

文档和导航指南

API Reference

API参考

📄 Read: references/api-reference.md

Use this as the authoritative Smith Chart API summary for:

```
SfSmithChart
```
properties and methods
Smith Chart events and event args
Nested components, classes, and enums

📄 阅读：references/api-reference.md

将其作为Smith Chart API的权威摘要，用于：

```
SfSmithChart
```
的属性和方法
Smith Chart的事件和事件参数 -嵌套组件、类和枚举

Getting Started

入门指南

📄 Read: references/getting-started.md

Start here for installation and initial setup:

Installing Syncfusion.Blazor.SmithChart NuGet package
Setting up Blazor Server, WebAssembly, or Web App projects
Registering services and theme references
Creating your first Smith Chart with basic data binding
Troubleshooting common setup issues

📄 阅读：references/getting-started.md

从这里开始进行安装和初始设置：

安装Syncfusion.Blazor.SmithChart NuGet包
设置Blazor Server、WebAssembly或Web App项目
注册服务和主题引用
创建第一个带有基础数据绑定的Smith Chart
排查常见设置问题

Series and Data Binding

系列和数据绑定

📄 Read: references/series-and-data-binding.md

Learn how to bind data and configure series:

Structuring data with Resistance and Reactance properties
Configuring SmithChartSeries with Fill, Opacity, Width, Visible
Adding multiple series for comparison
Customizing individual series appearance
Handling complex transmission line data

📄 阅读：references/series-and-data-binding.md

学习如何绑定数据和配置系列：

构建包含Resistance和Reactance属性的数据结构
配置SmithChartSeries的Fill、Opacity、Width、Visible属性
添加多个系列用于对比
自定义单个系列的外观
处理复杂的传输线数据

Axes Configuration

坐标轴配置

📄 Read: references/axes-configuration.md

Configure horizontal and radial axes:

Understanding horizontal axis (straight line) vs radial axis (circular)
Customizing axis labels (position, font, intersection handling)
Styling axis lines and grid appearance
Controlling label visibility and placement (Inside/Outside)
Font customization (FontFamily, FontWeight, FontStyle, Size, Color)

📄 阅读：references/axes-configuration.md

配置水平和径向坐标轴：

理解水平轴（直线）与径向轴（圆形）的区别
自定义坐标轴标签（位置、字体、交叉处理）
设置坐标轴线条和网格的样式
控制标签的可见性和位置（内部/外部）
字体自定义（FontFamily、FontWeight、FontStyle、Size、Color）

Markers and Data Labels

标记和数据标签

📄 Read: references/markers-and-data-labels.md

Add visual markers and data labels to series points:

Enabling and customizing marker shapes (Circle, Rectangle, Triangle)
Configuring marker size, color, opacity, and borders
Displaying data labels with resistance/reactance values
Using smart labels with connector lines to avoid overlaps
Creating custom data label templates

📄 阅读：references/markers-and-data-labels.md

为系列点添加可视化标记和数据标签：

启用并自定义标记形状（圆形、矩形、三角形）
配置标记的大小、颜色、透明度和边框
显示带有电阻/电抗值的数据标签
使用带连接线的智能标签避免重叠
创建自定义数据标签模板

Legend Configuration

图例配置

📄 Read: references/legend-configuration.md

Display and customize legends for series identification:

Positioning legends (Top, Bottom, Left, Right, Custom)
Customizing legend shapes, colors, and borders
Configuring legend alignment and sizing
Adding legend titles with custom styling
Enabling toggle visibility to show/hide series
Organizing legends in rows and columns

📄 阅读：references/legend-configuration.md

显示并自定义图例以识别系列：

设置图例位置（顶部、底部、左侧、右侧、自定义）
自定义图例的形状、颜色和边框
配置图例的对齐方式和尺寸
添加带有自定义样式的图例标题
启用切换可见性以显示/隐藏系列
按行和列组织图例

Tooltips

工具提示

📄 Read: references/tooltips.md

Enable interactive tooltips for data exploration:

Showing resistance and reactance values on hover
Customizing tooltip appearance (fill color, opacity, borders)
Creating custom tooltip templates
Accessing SmithChartPoint data in templates

📄 阅读：references/tooltips.md

启用交互式工具提示以探索数据：

悬停时显示电阻和电抗值
自定义工具提示外观（填充颜色、透明度、边框）
创建自定义工具提示模板
在模板中访问SmithChartPoint数据

Chart Dimensions and Titles

图表尺寸和标题

📄 Read: references/chart-dimensions-and-titles.md

Configure chart size, titles, and layout:

Setting chart width and height (fixed or responsive)
Adding and styling chart titles and subtitles
Configuring margins and padding
Customizing background colors
Creating responsive Smith Charts

📄 阅读：references/chart-dimensions-and-titles.md

配置图表大小、标题和布局：

设置图表宽度和高度（固定或响应式）
添加并设置图表标题和副标题的样式
配置边距和内边距
自定义背景颜色
创建响应式Smith Chart

Export, Print, Events, and Accessibility

导出、打印、事件和无障碍访问

📄 Read: references/export-print-events-accessibility.md

Export charts, handle events, and ensure accessibility:

Exporting to PNG, JPEG, SVG, and PDF formats
Printing Smith Charts for documentation
Handling component events (Loaded, SeriesRender, AxisLabelRendering, LegendRendering, TitleRendering, SubtitleRendering, TextRendering, TooltipRender, OnPrintComplete, OnExportComplete, SizeChanged)
Implementing WCAG-compliant accessible charts
Supporting keyboard navigation and screen readers
Testing accessibility compliance

📄 阅读：references/export-print-events-accessibility.md

导出图表、处理事件并确保无障碍访问：

导出为PNG、JPEG、SVG和PDF格式
打印Smith Chart用于文档记录
处理组件事件（Loaded、SeriesRender、AxisLabelRendering、LegendRendering、TitleRendering、SubtitleRendering、TextRendering、TooltipRender、OnPrintComplete、OnExportComplete、SizeChanged）
实现符合WCAG标准的无障碍图表
支持键盘导航和屏幕阅读器
测试无障碍合规性

Quick Start Example

快速入门示例

Here's a basic Smith Chart showing a transmission line:

razor

@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 }
    };
}

以下是一个展示传输线的基础Smith Chart：

razor

@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 }
    };
}

Common Use Cases

常见用例

RF Impedance Matching Analysis

RF阻抗匹配分析

razor

@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 }
    };
}

razor

@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 }
    };
}

Multiple Frequency Response Analysis

多频率响应分析

razor

@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 }
    };
}

razor

@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 }
    };
}

Key Properties

关键属性

Property	Type	Description	When to Use
`SmithChartSeriesCollection`	Collection	Container for all series	Always required to display data
`DataSource`	IEnumerable	List of impedance data points	Bind your resistance/reactance data
`Resistance`	string	Property name for resistance values	Map to your data model property
`Reactance`	string	Property name for reactance values	Map to your data model property
`RenderType`	Enum	Choose impedance or admittance rendering	Switch the Smith Chart coordinate interpretation
`Radius`	string	Radius of the Smith Chart plot area	Control the circular plot size
`ElementSpacing`	string	Spacing between chart elements	Tweak compact or dense layouts
`Background`	string	Chart background color	Match the host UI theme
`Theme`	string	Built-in Smith Chart theme	Keep visual styling consistent
`ID`	string	Chart element identifier	Useful for testing or scripting
`SmithChartSeriesMarker`	Component	Marker configuration	Highlight data points visually
`SmithChartSeriesTooltip`	Component	Tooltip configuration	Show values on hover
`SmithChartLegendSettings`	Component	Legend configuration	Identify multiple series
`SmithChartHorizontalAxis`	Component	Horizontal axis settings	Customize straight-line axis
`SmithChartRadialAxis`	Component	Radial axis settings	Customize circular axis
`Width`	string	Chart width (px or %)	Control chart dimensions
`Height`	string	Chart height (px or %)	Control chart dimensions

属性	类型	描述	使用场景
`SmithChartSeriesCollection`	集合	所有系列的容器	显示数据时必须使用
`DataSource`	IEnumerable	阻抗数据点列表	绑定电阻/电抗数据
`Resistance`	string	电阻值的属性名称	映射到数据模型的属性
`Reactance`	string	电抗值的属性名称	映射到数据模型的属性
`RenderType`	枚举	选择阻抗或导纳渲染模式	切换Smith Chart的坐标解释方式
`Radius`	string	Smith Chart绘图区域的半径	控制圆形绘图区域的大小
`ElementSpacing`	string	图表元素之间的间距	调整紧凑或密集布局
`Background`	string	图表背景颜色	匹配宿主UI主题
`Theme`	string	内置Smith Chart主题	保持视觉样式一致
`ID`	string	图表元素标识符	用于测试或脚本
`SmithChartSeriesMarker`	组件	标记配置	可视化突出数据点
`SmithChartSeriesTooltip`	组件	工具提示配置	悬停时显示数值
`SmithChartLegendSettings`	组件	图例配置	识别多个系列
`SmithChartHorizontalAxis`	组件	水平轴设置	自定义直线轴
`SmithChartRadialAxis`	组件	径向轴设置	自定义圆形轴
`Width`	string	图表宽度（px或%）	控制图表尺寸
`Height`	string	图表高度（px或%）	控制图表尺寸

Implementation Workflow

实现流程

Install Package → Add Syncfusion.Blazor.SmithChart NuGet package
Register Services → Add services in Program.cs/Startup.cs
Add Theme → Reference Syncfusion theme CSS
Prepare Data → Structure data with Resistance and Reactance properties
Add Component → Place
```
<SfSmithChart>
```
in your Razor page
Bind Series → Configure
```
SmithChartSeries
```
with DataSource
Customize → Add markers, tooltips, legends, and styling
Test → Verify data visualization and interactivity

安装包 → 添加Syncfusion.Blazor.SmithChart NuGet包
注册服务 → 在Program.cs/Startup.cs中添加服务
添加主题 → 引用Syncfusion主题CSS
准备数据 → 构建包含Resistance和Reactance属性的数据结构
添加组件 → 在Razor页面中放置
```
<SfSmithChart>
```
绑定系列 → 配置
```
SmithChartSeries
```
的DataSource
自定义 → 添加标记、工具提示、图例和样式
测试 → 验证数据可视化和交互性

Edge Cases and Considerations

边缘情况和注意事项

Data Range: Smith Chart represents normalized impedance (typically 0-∞). Ensure data is appropriately normalized.
Series Visibility: With many overlapping series, use distinct colors and toggle visibility via legend.
Null Values: Use nullable double (double?) for Resistance and Reactance to handle missing data gracefully.
Performance: Large datasets (>1000 points per series) may impact rendering. Consider data sampling.
Responsive Design: Use percentage-based Width/Height or container queries for responsive layouts.
Accessibility: Always enable tooltips and ARIA labels for screen reader support in RF engineering applications.

数据范围：Smith Chart表示归一化阻抗（通常为0-∞）。确保数据已适当归一化。
系列可见性：当多个系列重叠时，使用不同颜色并通过图例切换可见性。
空值处理：使用可空double（double?）类型存储Resistance和Reactance，以优雅处理缺失数据。
性能：大型数据集（每个系列超过1000个点）可能影响渲染性能。考虑对数据进行采样。
响应式设计：使用百分比宽度/高度或容器查询实现响应式布局。
无障碍访问：在RF工程应用中，始终启用工具提示和ARIA标签以支持屏幕阅读器。

When NOT to Use This Component

何时不使用此组件

General XY Plotting: Use regular Chart component for standard Cartesian plots
Financial Data: Use Stock Chart for time-series financial data
Non-RF Data: Smith Charts are specialized for impedance/admittance; use appropriate chart types for other domains
3D Impedance: Smith Charts are 2D; complex 3D RF visualization requires different approaches

通用XY绘图：使用常规Chart组件进行标准笛卡尔坐标绘图
金融数据：使用Stock Chart处理时间序列金融数据
非RF数据：Smith Chart专门用于阻抗/导纳数据；其他领域使用相应的图表类型
3D阻抗可视化：Smith Chart是2D组件；复杂的3D RF可视化需要其他方法