syncfusion-react-smithchart

实现 Syncfusion React Smith Chart

一份全面的指南，介绍如何实现和自定义 Syncfusion React Smith Chart 组件。Smith Chart 是一种专用图表，用于电气工程和 RF 设计，可视化阻抗、反射系数和传输线参数。

何时使用此指南

在以下情况下使用此指南：

• 可视化传输线阻抗和反射数据
• 绘制 RF 电路参数（S 参数、阻抗匹配）
• 展示电阻和电抗之间的关系
• 创建带标记和工具提示的交互式 Smith Chart
• 实现电气工程数据可视化
• 配置 Smith Chart 坐标轴（水平轴和径向轴）
• 添加图例、数据标签和注释
• 导出 Smith Chart，用于文档或报告
• 确保技术图表符合无障碍要求

组件概览

Syncfusion React Smith Chart 是一款专用图表组件，具有以下功能：

• 使用电阻和电抗坐标绘制数据点
• 支持多个系列，并可自定义样式
• 提供水平轴和径向轴配置
• 包含交互功能（工具提示、图例、标记）
• 支持打印和导出（PNG、JPEG、SVG、PDF）
• 符合 WCAG 2.2 无障碍标准
• 支持响应式尺寸和主题

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 依赖项和软件包安装
• 使用 npm 安装 @syncfusion/ej2-react-charts
• SmithchartComponent 基本实现
• 模块注入（SmithchartLegend、TooltipRender）
• CSS 主题导入和配置
• 首次渲染和初始化
• 完整的可运行示例

数据和系列配置

📄 阅读： references/series-configuration.md

• 向 Smith Chart 添加多个系列
• 两种数据绑定方法（dataSource 和 points）
• 电阻和电抗字段映射
• 系列自定义（填充、透明度、宽度、可见性）
• 智能标签配置
• 多系列示例和模式

坐标轴配置

📄 阅读： references/axis-configuration.md

• 水平轴（直线）配置
• 径向轴（圆形路径）配置
• 标签自定义（位置、交叉处理、样式）
• 主网格线和次网格线配置
• 坐标轴线属性（宽度、虚线模式、可见性）
• 完整的坐标轴自定义示例

视觉元素：标记和数据标签

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

• 在数据点上启用和自定义标记
• 标记属性（大小、形状、颜色、边框、透明度）
• 数据标签实现和智能定位
• 数据标签样式（字体、颜色、边框）
• 提高清晰度的最佳实践

图例配置

📄 阅读： references/legend-configuration.md

• 使用 SmithchartLegend 模块启用图例
• 定位（顶部、底部、左侧、右侧、自定义）
• 对齐选项（近端、居中、远端）
• 图例自定义（形状、大小、内边距）
• 切换可见性功能
• 设置系列名称以显示在图例中

工具提示和交互

📄 阅读： references/tooltip-configuration.md

API 参考

📄 阅读： references/api-reference.md

• 使用 TooltipRender 模块启用工具提示
• 按系列配置工具提示
• 工具提示的可见性和外观
• 何时使用工具提示而非数据标签
• 交互式悬停行为

外观和尺寸

📄 阅读： references/dimensions-and-sizing.md

• 基于容器的尺寸设置（CSS/内联样式）
• 固定像素尺寸
• 基于百分比的响应式尺寸
• 响应式设计注意事项
• 何时使用各类尺寸设置方法

标题和副标题

📄 阅读： references/title-and-subtitle.md

• 为图表添加描述性标题
• 配置副标题
• 缩短过长的标题文本
• 自定义字体和对齐方式
• 控制可见性

打印、导出和无障碍访问

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

• 直接从浏览器打印 Smith 图表
• 导出为多种格式（PNG、JPEG、SVG、PDF）
• 符合 WCAG 2.2 和 Section 508 标准
• 支持键盘导航
• 兼容屏幕阅读器
• WAI-ARIA 属性
• 无障碍访问测试和最佳实践

快速入门示例

import * as React from 'react';
import { SmithchartComponent, SeriesCollectionDirective, SeriesDirective, Inject, SmithchartLegend, TooltipRender } from '@syncfusion/ej2-react-charts';

function App() {
  const transmissionData = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0, reactance: 0.1 },
    { resistance: 0, reactance: 0.2 },
    { resistance: 0.3, reactance: 0.3 },
    { resistance: 0.5, reactance: 0.4 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <SmithchartComponent
      id="smithchart"
      title={{ text: 'Transmission Line Impedance' }}
      legendSettings={{ visible: true }}
    >
      <Inject services={[SmithchartLegend, TooltipRender]} />
      <SmithChartSeriesCollectionDirective>
        <SmithChartSeriesDirective
          name="Transmission1"
          points={transmissionData}
          marker={{ visible: true }}
          tooltip={{ visible: true }}
        />
      </SeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

常见模式

使用 DataSource 的多个系列

const series1Data = [
  { resistance: 0, reactance: 0.05 },
  { resistance: 0.3, reactance: 0.2 },
  { resistance: 1.0, reactance: 0.4 }
];

const series2Data = [
  { resistance: 0.1, reactance: 0.1 },
  { resistance: 0.5, reactance: 0.3 },
  { resistance: 1.5, reactance: 0.5 }
];

<SmithchartComponent legendSettings={{ visible: true }}>
  <Inject services={[SmithchartLegend]} />
  <SmithChartSeriesCollectionDirective>
    <SmithChartSeriesDirective
      name="Line 1"
      dataSource={series1Data}
      resistance="resistance"
      reactance="reactance"
      fill="blue"
    />
    <SmithChartSeriesDirective
      name="Line 2"
      dataSource={series2Data}
      resistance="resistance"
      reactance="reactance"
      fill="red"
    />
  </SeriesCollectionDirective>
</SmithchartComponent>

自定义标记和标签

<SmithChartSeriesDirective
  name="Impedance Data"
  points={data}
  marker={{
    visible: true,
    height: 10,
    width: 10,
    shape: 'Diamond',
    fill: 'green',
    dataLabel: {
      visible: true,
      textStyle: { color: 'black', size: '10px' }
    }
  }}
/>

导出为图像

import { useRef } from 'react';

function ChartWithExport() {
  const chartRef = useRef(null);

  const exportChart = () => {
    chartRef.current.export('PNG', 'smithchart');
  };

  return (
    <>
      <button onClick={exportChart}>Export as PNG</button>
      <SmithchartComponent ref={chartRef} id="smithchart">
        {/* series configuration */}
      </SmithchartComponent>
    </>
  );
}

主要属性和功能

SmithchartComponent 属性

Property	Type	Description
id	string	组件的唯一标识符
title	object	标题配置，包括文本和样式
legendSettings	object	图例的可见性、位置和样式
width	string	图表宽度（像素或百分比）
height	string	图表高度（像素或百分比）
horizontalAxis	object	水平轴配置
radialAxis	object	径向轴配置

SeriesDirective 属性

Property	Type	Description
name	string	用于图例显示的系列名称
points	array	由 {resistance, reactance} 对象组成的数组
dataSource	array	包含自定义字段映射的数据数组
resistance	string	电阻值的字段名称
reactance	string	电抗值的字段名称
fill	string	系列线条颜色
width	number	系列线条宽度
opacity	number	系列线条不透明度（0-1）
marker	object	标记配置
tooltip	object	工具提示配置
enableSmartLabels	boolean	智能标签定位

必需的模块注入

import { SmithchartLegend, TooltipRender } from '@syncfusion/ej2-react-charts';

<Inject services={[SmithchartLegend, TooltipRender]} />

• SmithchartLegend：图例功能所必需
• TooltipRender：显示工具提示所必需

故障排除指南

图表未渲染

• 确认已安装 @syncfusion/ej2-react-charts 包
• 确保已在应用中导入 CSS 主题
• 检查数据是否包含有效的 resistance 和 reactance 字段
• 确认容器已定义尺寸

图例未显示

• 确认 legendSettings.visible 已设置为 true
• 确保已注入 SmithchartLegend 模块
• 检查系列是否已定义 name 属性

工具提示不起作用

• 确认已注入 TooltipRender 模块
• 确认系列上的 tooltip.visible 为 true
• 检查是否已启用鼠标悬停事件

数据未显示

• 验证数据格式：由包含 resistance/reactance 的对象组成的数组
• 检查字段名称是否与 dataSource 属性配置相符
• 确保数值有效（不是 NaN 或 undefined）
• 确认系列可见性未设置为 false

导出失败

• 确认图表具有有效的 id 属性
• 检查导出格式是否受支持（PNG、JPEG、SVG、PDF）
• 确保在已挂载组件的引用上调用导出方法

样式问题

• 导入正确的 Syncfusion 主题 CSS 文件
• 检查自定义样式是否与组件类冲突
• 确认 width/height 属性格式正确
• 确保容器样式允许图表渲染

其他资源

所有详细文档都可在上述参考文件中找到。每个参考文件均为独立文档，包含完整示例、配置选项，以及针对相应功能领域的最佳实践。