syncfusion-react-smithchart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion React Smith Charts

实现Syncfusion React Smith Chart

A comprehensive skill for implementing and customizing Syncfusion React Smith Chart component. Smith Charts are specialized diagrams used in electrical engineering and RF design to visualize impedance, reflection coefficients, and transmission line parameters.

本技能全面讲解如何实现并定制Syncfusion React Smith Chart组件。Smith Chart是电气工程和RF设计中用于可视化阻抗、反射系数和传输线参数的专用图表。

When to Use This Skill

何时使用本技能

Use this skill when you need to:

Visualize transmission line impedance and reflection data
Plot RF circuit parameters (S-parameters, impedance matching)
Display resistance and reactance relationships
Create interactive Smith Charts with markers and tooltips
Implement electrical engineering data visualizations
Configure Smith Chart axes (horizontal and radial)
Add legends, data labels, and annotations
Export Smith Charts for documentation or reports
Ensure accessibility compliance for technical charts

在以下场景中可使用本技能：

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

Component Overview

组件概述

The Syncfusion React Smith Chart is a specialized charting component that:

Plots data points with resistance and reactance coordinates
Supports multiple series with customizable styling
Provides horizontal and radial axis configurations
Includes interactive features (tooltips, legends, markers)
Offers print and export capabilities (PNG, JPEG, SVG, PDF)
Ensures WCAG 2.2 accessibility compliance
Supports responsive sizing and theming

Syncfusion React Smith Chart是一款专业的图表组件，具备以下特性：

以电阻和电抗坐标绘制数据点
支持多个系列的定制样式
提供水平轴和径向轴配置
包含交互式功能（工具提示、图例、标记）
支持打印和导出功能（PNG、JPEG、SVG、PDF）
符合WCAG 2.2可访问性标准
支持响应式尺寸调整和主题定制

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Dependencies and package installation
Installing
```
@syncfusion/ej2-react-charts
```
via npm
Basic SmithchartComponent implementation
Module injection (SmithchartLegend, TooltipRender)
CSS theme imports and configuration
First render and initialization
Complete working example

📄 阅读： references/getting-started.md

依赖项和包安装
通过npm安装
```
@syncfusion/ej2-react-charts
```
基础SmithchartComponent实现
模块注入（SmithchartLegend、TooltipRender）
CSS主题导入与配置
首次渲染与初始化
完整工作示例

Data and Series Configuration

数据与系列配置

📄 Read: references/series-configuration.md

Adding multiple series to Smith Chart
Two data binding methods (dataSource vs points)
Resistance and reactance field mapping
Series customization (fill, opacity, width, visibility)
Smart label configuration
Multi-series examples and patterns

📄 阅读： references/series-configuration.md

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

Axis Configuration

坐标轴配置

📄 Read: references/axis-configuration.md

Horizontal axis (straight line) configuration
Radial axis (circular path) configuration
Label customization (position, intersection handling, styling)
Major and minor gridlines configuration
Axis line properties (width, dash patterns, visibility)
Complete axis customization examples

📄 阅读： references/axis-configuration.md

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

Visual Elements: Markers and Data Labels

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

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

Enabling and customizing markers on data points
Marker properties (size, shape, color, border, opacity)
Data label implementation and smart positioning
Data label styling (font, color, border)
Best practices for visual clarity

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

启用并定制数据点标记
标记属性（尺寸、形状、颜色、边框、透明度）
数据标签实现与智能定位
数据标签样式（字体、颜色、边框）
视觉清晰度最佳实践

Legend Configuration

图例配置

📄 Read: references/legend-configuration.md

Enabling legends with SmithchartLegend module
Positioning (top, bottom, left, right, custom)
Alignment options (near, center, far)
Legend customization (shape, size, padding)
Toggle visibility functionality
Series naming for legend display

📄 阅读： references/legend-configuration.md

通过SmithchartLegend模块启用图例
位置设置（顶部、底部、左侧、右侧、自定义）
对齐选项（靠近、居中、远离）
图例定制（形状、尺寸、内边距）
可见性切换功能
系列命名用于图例显示

Tooltips and Interactivity

工具提示与交互性

📄 Read: references/tooltip-configuration.md

📄 阅读： references/tooltip-configuration.md

API Reference

API参考

📄 Read: references/api-reference.md

Enabling tooltips with TooltipRender module
Per-series tooltip configuration
Tooltip visibility and appearance
When to use tooltips vs data labels
Interactive hover behavior

📄 阅读： references/api-reference.md

通过TooltipRender模块启用工具提示
按系列配置工具提示
工具提示可见性与外观
工具提示与数据标签的使用场景对比
交互式悬停行为

Appearance and Sizing

外观与尺寸

📄 Read: references/dimensions-and-sizing.md

Container-based sizing (CSS/inline styles)
Fixed pixel dimensions
Percentage-based responsive sizing
Responsive design considerations
When to use each sizing approach

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

基于容器的尺寸设置（CSS/内联样式）
固定像素尺寸
百分比响应式尺寸
响应式设计考量
各尺寸设置方式的适用场景

Title and Subtitle

标题与副标题

📄 Read: references/title-and-subtitle.md

Adding descriptive titles to charts
Subtitle configuration
Title trimming for long text
Font and alignment customization
Visibility controls

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

为图表添加描述性标题
副标题配置
长文本标题截断
字体与对齐定制
可见性控制

Print, Export, and Accessibility

打印、导出与可访问性

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

Printing Smith Charts directly from browser
Exporting to multiple formats (PNG, JPEG, SVG, PDF)
WCAG 2.2 and Section 508 compliance
Keyboard navigation support
Screen reader compatibility
WAI-ARIA attributes
Accessibility testing and best practices

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

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

Quick Start Example

快速入门示例

tsx

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;

tsx

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 }}
        />
      </SmithChartSeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

Common Patterns

常见模式

Multiple Series with DataSource

多系列与DataSource

tsx

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>

tsx

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"
    />
  </SmithChartSeriesCollectionDirective>
</SmithchartComponent>

Customized Markers and Labels

定制标记与标签

tsx

<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' }
    }
  }}
/>

tsx

<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' }
    }
  }}
/>

Export to Image

导出为图片

tsx

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>
    </>
  );
}

tsx

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>
    </>
  );
}

Key Props and Features

关键属性与特性

SmithchartComponent Props

SmithchartComponent属性

Property	Type	Description
`id`	string	Unique identifier for the component
`title`	object	Title configuration with text and styling
`legendSettings`	object	Legend visibility, position, and styling
`width`	string	Chart width (pixels or percentage)
`height`	string	Chart height (pixels or percentage)
`horizontalAxis`	object	Horizontal axis configuration
`radialAxis`	object	Radial axis configuration

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

SeriesDirective Props

SeriesDirective属性

Property	Type	Description
`name`	string	Series name for legend display
`points`	array	Array of {resistance, reactance} objects
`dataSource`	array	Data array with custom field mapping
`resistance`	string	Field name for resistance values
`reactance`	string	Field name for reactance values
`fill`	string	Series line color
`width`	number	Series line width
`opacity`	number	Series line opacity (0-1)
`marker`	object	Marker configuration
`tooltip`	object	Tooltip configuration
`enableSmartLabels`	boolean	Smart label positioning

属性	类型	说明
`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	智能标签定位开关

Required Module Injections

必需模块注入

tsx

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

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

SmithchartLegend: Required for legend functionality
TooltipRender: Required for tooltip display

tsx

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

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

SmithchartLegend：图例功能必需模块
TooltipRender：工具提示显示必需模块

Troubleshooting Guide

故障排除指南

Chart Not Rendering

图表未渲染

Verify
```
@syncfusion/ej2-react-charts
```
package is installed
Ensure CSS theme is imported in your app
Check that data has valid
```
resistance
```
and
```
reactance
```
fields
Confirm container has defined dimensions

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

Legend Not Showing

图例未显示

Verify
```
legendSettings.visible
```
is set to
```
true
```
Ensure
```
SmithchartLegend
```
module is injected
Check that series have
```
name
```
property defined

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

Tooltips Not Working

工具提示不工作

Confirm
```
TooltipRender
```
module is injected
Verify
```
tooltip.visible
```
is
```
true
```
on series
Check that mouse hover events are enabled

确认已注入
```
TooltipRender
```
模块
验证系列的
```
tooltip.visible
```
设置为
```
true
```
检查鼠标悬停事件已启用

Data Not Displaying

数据未显示

Validate data format: array of objects with resistance/reactance
Check field names match dataSource property configuration
Ensure numeric values are valid (not NaN or undefined)
Verify series visibility is not set to false

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

Export Fails

导出失败

Confirm chart has a valid
```
id
```
property
Check export format is supported (PNG, JPEG, SVG, PDF)
Ensure export method is called on mounted component reference

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

Styling Issues

样式问题

Import correct Syncfusion theme CSS file
Check that custom styles don't conflict with component classes
Verify width/height properties are properly formatted
Ensure container styling allows chart to render

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

Additional Resources

附加资源

All detailed documentation is available in the reference files above. Each reference file is self-contained with complete examples, configuration options, and best practices specific to that feature area.

所有详细文档均在上述参考文件中。每个参考文件都包含完整示例、配置选项和特定功能领域的最佳实践。