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：带系列的基本图表

创建一个 Smith 图表，包含一个系列、启用标记并采用基本样式。

模式 2：带图例的多个系列

绘制多个传输线系列，并使用图例控制可见性和识别系列。

模式 3：交互式仪表板

构建包含工具提示、数据标签、自定义坐标轴配置以及打印/导出功能的仪表板。

模式 4：响应式布局

使用基于百分比的尺寸设置，创建可根据容器尺寸自适应的 Smith 图表。

关键属性

系列级别：

• dataSource - 包含电阻和电抗的对象数组
• points - 点值的直接数组
• fill - 系列线条颜色
• opacity - 系列透明度
• width - 系列线条粗细
• name - 用于图例的系列标识符

坐标轴级别：

• labelPosition - 坐标轴内侧或外侧
• labelIntersectAction - 隐藏相交的标签
• visible - 显示/隐藏坐标轴

图例：

• visible - 启用/禁用图例
• position - 顶部、底部、左侧、右侧、自定义
• alignment - 靠近、居中、远离

常见用例

1. 射频电路分析 - 绘制传输线参数和阻抗匹配
2. 网络分析 - 可视化 S 参数和反射系数
3. 组件测试 - 显示高频组件的测量数据
4. 教学仪表板 - 通过交互式可视化讲授传输线理论
5. 技术报告 - 生成可导出的 Smith 图表图示，用于文档编写