syncfusion-react-3d-circular-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion React 3D Circular Charts

实现Syncfusion React 3D环形图表

A comprehensive skill for implementing Syncfusion's React 3D Circular Chart component. This skill guides you through creating pie and donut charts with 3D visualization, data labels, legends, tooltips, and advanced customization options.

这是一份关于实现Syncfusion React 3D环形图表组件的全面指南。本技能将指导你创建具备3D可视化效果的饼图和环形图，以及添加数据标签、图例、工具提示和高级自定义选项。

When to Use This Skill

何时使用本技能

Use this skill when you need to:

Create 3D pie or donut charts in React applications
Visualize proportional data with circular charts
Display data with 3D depth and visual appeal
Add interactive tooltips and legends to charts
Customize chart appearance with data labels
Handle empty or null data points gracefully
Export charts to various formats (PNG, JPEG, SVG, PDF)
Print charts directly from the browser
Implement responsive circular chart visualizations

当你需要以下功能时使用本技能：

在React应用中创建3D饼图或环形图
使用环形图表可视化比例数据
展示具备3D深度和视觉吸引力的数据
为图表添加交互式工具提示和图例
通过数据标签自定义图表外观
优雅处理空值或null数据点
将图表导出为多种格式（PNG、JPEG、SVG、PDF）
直接从浏览器打印图表
实现响应式环形图表可视化

Component Overview

组件概述

The 3D Circular Chart component provides:

Pie and Donut Charts: Classic circular visualizations with 3D depth
Flexible Data Binding: Easy mapping of data sources to chart series
Interactive Features: Tooltips, legends, and click events
Visual Customization: Data labels, colors, and radius configurations
Export Options: Print and export to multiple formats
Empty Point Handling: Smart handling of null/undefined values
Responsive Design: Adapts to container size automatically

3D环形图表组件提供以下功能：

饼图和环形图： 具备3D深度的经典环形可视化效果
灵活的数据绑定： 轻松将数据源映射到图表系列
交互功能： 工具提示、图例和点击事件
视觉自定义： 数据标签、颜色和半径配置
导出选项： 打印和导出为多种格式
空值点处理： 智能处理null/undefined值
响应式设计： 自动适配容器尺寸

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Installation and package dependencies
Setting up React application with Vite or Create React App
Adding 3D Circular Chart component to your project
Importing CSS themes
Basic pie series implementation with data source
Mapping data fields with xName and yName properties
Running your first 3D Circular Chart
Minimal working example

📄 阅读： references/getting-started.md

安装和包依赖
使用Vite或Create React App搭建React应用
将3D环形图表组件添加到项目中
导入CSS主题
实现带数据源的基础饼图系列
使用xName和yName属性映射数据字段
运行你的第一个3D环形图表
最简可用示例

Pie and Donut Charts

饼图与环形图

📄 Read: references/pie-donut-charts.md

Injecting PieSeries3D module
Rendering default pie charts
Customizing chart radius (default 80% of container)
Creating various radius pie charts with per-slice customization
Implementing donut charts using innerRadius property
Text and fill color mapping from data source
Customizing individual points with pointRender event
Complete examples for pie and donut variations

📄 阅读： references/pie-donut-charts.md

注入PieSeries3D模块
渲染默认饼图
自定义图表半径（默认是容器的80%）
创建具备切片级自定义的多种半径饼图
使用innerRadius属性实现环形图
从数据源映射文本和填充颜色
使用pointRender事件自定义单个数据点
饼图和环形图变体的完整示例

Data Labels

数据标签

📄 Read: references/data-labels.md

Enabling data label visibility
Injecting CircularChartDataLabel3D module
Smart label arrangement to prevent overlap
Positioning labels inside or outside the chart
Creating custom templates with placeholders
Formatting text and styling labels
Configuring connector lines
Font customization for data labels

📄 阅读： references/data-labels.md

启用数据标签可见性
注入CircularChartDataLabel3D模块
智能标签排列以防止重叠
将标签定位在图表内部或外部
使用占位符创建自定义模板
格式化文本并设置标签样式
配置连接线
自定义数据标签的字体

Legend

图例

📄 Read: references/legend.md

Enabling legend visibility
Injecting CircularChartLegend3D module
Positioning legends (left, right, top, bottom)
Alignment options (center, far, near)
Reversing legend item order
Legend pagination for many items
Shape and marker customization
Styling and click behavior configuration

📄 阅读： references/legend.md

启用图例可见性
注入CircularChartLegend3D模块
定位图例（左、右、上、下）
对齐选项（居中、远端、近端）
反转图例项顺序
多图例项的分页功能
形状和标记自定义
设置样式和点击行为

Tooltip

工具提示

📄 Read: references/tooltip.md

Enabling tooltip on hover
Injecting CircularChartTooltip3D module
Setting custom tooltip headers
Format string customization with placeholders
Creating tooltip templates
Displaying series names and point values
Styling tooltip appearance
Event-based tooltip customization

📄 阅读： references/tooltip.md

启用悬停时的工具提示
注入CircularChartTooltip3D模块
设置自定义工具提示标题
使用占位符自定义格式字符串
创建工具提示模板
显示系列名称和数据点值
设置工具提示外观样式
基于事件的工具提示自定义

Empty Points

空值点

📄 Read: references/empty-points.md

Understanding empty points (null/undefined values)
Configuring emptyPointSettings property
Mode options: Gap, Average, Drop, Zero
Gap mode: skipping empty data points
Average mode: using calculated averages
Drop mode: excluding from chart
Zero mode: treating as zero values
Custom fill colors for empty points

📄 阅读： references/empty-points.md

理解空值点（null/undefined值）
配置emptyPointSettings属性
模式选项：Gap、Average、Drop、Zero
Gap模式：跳过空数据点
Average模式：使用计算出的平均值
Drop模式：从图表中排除
Zero模式：视为零值
为空值点设置自定义填充颜色

Title and Subtitle

标题与副标题

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

Adding chart titles with title property
Title positioning and alignment
Customizing title style (font, color, size)
Adding subtitles with subTitle property
Subtitle positioning
Styling subtitles independently
Combining title and subtitle
Responsive title sizing

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

使用title属性添加图表标题
标题定位和对齐
自定义标题样式（字体、颜色、大小）
使用subTitle属性添加副标题
副标题定位
独立设置副标题样式
组合标题和副标题
响应式标题尺寸

Print and Export

打印与导出

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

Printing charts directly from browser
Using print method with chart ID
Exporting to image formats (JPEG, PNG, SVG)
Exporting to PDF with pdfExport method
Specifying export type and filename
Button-triggered print and export
Export quality and resolution settings
Troubleshooting export issues

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

直接从浏览器打印图表
使用带图表ID的print方法
导出为图像格式（JPEG、PNG、SVG）
使用pdfExport方法导出为PDF
指定导出类型和文件名
按钮触发的打印和导出
导出质量和分辨率设置
导出问题排查

API Reference

API参考

📄 Read: references/api-reference.md

Summary of component properties, methods, and events based on the official Syncfusion API docs for
```
CircularChart3DComponent
```
.

📄 阅读： references/api-reference.md

基于Syncfusion官方
```
CircularChart3DComponent
```
API文档的组件属性、方法和事件汇总。

Quick Start Example

快速入门示例

tsx

import { CircularChart3DComponent, CircularChart3DSeriesCollectionDirective, CircularChart3DSeriesDirective, PieSeries3D, CircularChartDataLabel3D, CircularChartLegend3D, Inject } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    const circularData = [
        { x: 'Chrome', y: 62.92 },
        { x: 'Internet Explorer', y: 6.12 },
        { x: 'Opera', y: 3.15 },
        { x: 'Edge', y: 5.5 },
        { x: 'Safari', y: 19.97 },
        { x: 'Others', y: 2.34 }
    ];
    return <CircularChart3DComponent id='charts' title='Browser Market Shares in November 2023' tilt={-45} legendSettings={{ visible: true, position: 'Right' }}>
        <Inject services={[PieSeries3D, CircularChartDataLabel3D, CircularChartLegend3D]} />
        <CircularChart3DSeriesCollectionDirective>
            <CircularChart3DSeriesDirective dataSource={circularData} xName='x' yName='y' dataLabel={{ visible: true, position: 'Outside', name: 'x', font: { fontWeight: '600' }, connectorStyle: { length: '40px' } }}>
            </CircularChart3DSeriesDirective>
        </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>;
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);

tsx

import { CircularChart3DComponent, CircularChart3DSeriesCollectionDirective, CircularChart3DSeriesDirective, PieSeries3D, CircularChartDataLabel3D, CircularChartLegend3D, Inject } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    const circularData = [
        { x: 'Chrome', y: 62.92 },
        { x: 'Internet Explorer', y: 6.12 },
        { x: 'Opera', y: 3.15 },
        { x: 'Edge', y: 5.5 },
        { x: 'Safari', y: 19.97 },
        { x: 'Others', y: 2.34 }
    ];
    return <CircularChart3DComponent id='charts' title='Browser Market Shares in November 2023' tilt={-45} legendSettings={{ visible: true, position: 'Right' }}>
        <Inject services={[PieSeries3D, CircularChartDataLabel3D, CircularChartLegend3D]} />
        <CircularChart3DSeriesCollectionDirective>
            <CircularChart3DSeriesDirective dataSource={circularData} xName='x' yName='y' dataLabel={{ visible: true, position: 'Outside', name: 'x', font: { fontWeight: '600' }, connectorStyle: { length: '40px' } }}>
            </CircularChart3DSeriesDirective>
        </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>;
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);

Common Patterns

常见模式

Creating a Donut Chart

创建环形图

tsx

<CircularChart3DSeriesDirective
  dataSource={data}
  xName="category"
  yName="value"
  innerRadius="40%"  // Creates donut effect
  radius="80%"
/>

tsx

<CircularChart3DSeriesDirective
  dataSource={data}
  xName="category"
  yName="value"
  innerRadius="40%"  // Creates donut effect
  radius="80%"
/>

Adding Data Labels

添加数据标签

tsx

import { CircularChartDataLabel3D } from '@syncfusion/ej2-react-charts';

<CircularChart3DComponent>
  <Inject services={[PieSeries3D, CircularChartDataLabel3D]} />
  <CircularChart3DSeries>
    <CircularChart3DSeriesDirective
      dataSource={data}
      xName="x"
      yName="y"
      dataLabel={{ visible: true, position: 'Outside' }}
    />
  </CircularChart3DSeries>
</CircularChart3DComponent>

tsx

import { CircularChartDataLabel3D } from '@syncfusion/ej2-react-charts';

<CircularChart3DComponent>
  <Inject services={[PieSeries3D, CircularChartDataLabel3D]} />
  <CircularChart3DSeries>
    <CircularChart3DSeriesDirective
      dataSource={data}
      xName="x"
      yName="y"
      dataLabel={{ visible: true, position: 'Outside' }}
    />
  </CircularChart3DSeries>
</CircularChart3DComponent>

Enabling Legend and Tooltip

启用图例和工具提示

tsx

import { CircularChartLegend3D, CircularChartTooltip3D } from '@syncfusion/ej2-react-charts';

<CircularChart3DComponent
  legendSettings={{ visible: true, position: 'Bottom' }}
  tooltip={{ enable: true, format: '${point.x}: ${point.y}' }}
>
  <Inject services={[PieSeries3D, CircularChartLegend3D, CircularChartTooltip3D]} />
  {/* Series configuration */}
</CircularChart3DComponent>

tsx

import { CircularChartLegend3D, CircularChartTooltip3D } from '@syncfusion/ej2-react-charts';

<CircularChart3DComponent
  legendSettings={{ visible: true, position: 'Bottom' }}
  tooltip={{ enable: true, format: '${point.x}: ${point.y}' }}
>
  <Inject services={[PieSeries3D, CircularChartLegend3D, CircularChartTooltip3D]} />
  {/* Series configuration */}
</CircularChart3DComponent>

Handling Empty Points

处理空值点

tsx

<CircularChart3DSeriesDirective
  dataSource={dataWithNulls}
  xName="category"
  yName="value"
  emptyPointSettings={{ 
    mode: 'Average',  // Options: Gap, Average, Drop, Zero
    fill: '#cccccc'
  }}
/>

tsx

<CircularChart3DSeriesDirective
  dataSource={dataWithNulls}
  xName="category"
  yName="value"
  emptyPointSettings={{ 
    mode: 'Average',  // Options: Gap, Average, Drop, Zero
    fill: '#cccccc'
  }}
/>

Key Props Reference

关键属性参考

CircularChart3DComponent Props

CircularChart3DComponent属性

title: Chart title text
subTitle: Chart subtitle text
legendSettings: Configure legend appearance and behavior
tooltip: Enable and customize tooltips
enableExport: Enable export functionality
width/height: Chart dimensions

title: 图表标题文本
subTitle: 图表副标题文本
legendSettings: 配置图例外观和行为
tooltip: 启用并自定义工具提示
enableExport: 启用导出功能
width/height: 图表尺寸

CircularChart3DSeriesDirective Props

CircularChart3DSeriesDirective属性

dataSource: Array of data objects
xName: Property name for category/label
yName: Property name for values
radius: Chart radius (percentage string, e.g., "70%")
innerRadius: Inner radius for donut charts (percentage)
dataLabel: Configuration for data labels
emptyPointSettings: Handling null/undefined values
pointColorMapping: Map colors from data source

dataSource: 数据对象数组
xName: 分类/标签的属性名
yName: 值的属性名
radius: 图表半径（百分比字符串，例如"70%"）
innerRadius: 环形图的内半径（百分比）
dataLabel: 数据标签配置
emptyPointSettings: 处理null/undefined值
pointColorMapping: 从数据源映射颜色

Module Injection

模块注入

Required modules must be injected via

<Inject services={[...]} />

PieSeries3D: Core pie/donut chart functionality
CircularChartDataLabel3D: Data label features
CircularChartLegend3D: Legend functionality
CircularChartTooltip3D: Tooltip features
CircularChart3DExport: Export to image formats
CircularChart3DPdfExport: PDF export capability

必须通过

<Inject services={[...]} />

注入所需模块：

PieSeries3D: 核心饼图/环形图功能
CircularChartDataLabel3D: 数据标签功能
CircularChartLegend3D: 图例功能
CircularChartTooltip3D: 工具提示功能
CircularChart3DExport: 导出为图像格式
CircularChart3DPdfExport: PDF导出能力

Common Use Cases

常见使用场景

Sales Distribution Dashboard

销售分布仪表盘

Perfect for displaying market share, sales by category, or revenue distribution across products/regions.

非常适合展示市场份额、按类别划分的销售额或跨产品/区域的收入分布。

Budget Allocation

预算分配

Visualize budget breakdown by department, expense categories, or cost centers with clear proportional representation.

通过清晰的比例展示，可视化按部门、费用类别或成本中心划分的预算明细。

Survey Results

调查结果

Show poll results, customer feedback distribution, or demographic breakdowns with intuitive circular visualization.

使用直观的环形可视化展示投票结果、客户反馈分布或人口统计细分。

Portfolio Composition

投资组合构成

Display investment allocation, asset distribution, or resource allocation with interactive charts.

展示投资分配、资产分布或资源分配的交互式图表。

Time Allocation

时间分配

Represent time spent on activities, project phases, or resource utilization with donut charts.

使用环形图表示活动耗时、项目阶段或资源利用率。

Troubleshooting Tips

故障排查技巧

Chart not rendering?

Ensure you've installed
```
@syncfusion/ej2-react-charts
```
package
Import required CSS theme file
Verify data source is properly formatted array
Check that required modules are injected (PieSeries3D)

Data labels overlapping?

The component automatically arranges labels to prevent overlap
Use
```
position: 'Outside'
```
for better spacing
Consider reducing font size or using templates

Export not working?

Inject CircularChart3DExport or CircularChart3DPdfExport modules
Set
```
enableExport: true
```
on the chart component
Ensure you're calling the correct method (export or pdfExport)

Colors not displaying correctly?

Use
```
pointColorMapping
```
to map colors from data source
Specify colors in data objects or use chart palettes
Check CSS theme is properly imported

Ready to build? Start with references/getting-started.md for installation and basic setup, then explore specific features as needed.

图表无法渲染？

确保已安装
```
@syncfusion/ej2-react-charts
```
包
导入所需的CSS主题文件
验证数据源是格式正确的数组
检查是否已注入所需模块（PieSeries3D）

数据标签重叠？

组件会自动排列标签以防止重叠
使用
```
position: 'Outside'
```
获得更好的间距
考虑减小字体大小或使用模板

导出功能无法工作？

注入CircularChart3DExport或CircularChart3DPdfExport模块
在图表组件上设置
```
enableExport: true
```
确保调用了正确的方法（export或pdfExport）

颜色显示不正确？

使用
```
pointColorMapping
```
从数据源映射颜色
在数据对象中指定颜色或使用图表调色板
检查CSS主题是否已正确导入

准备开始构建？ 从references/getting-started.md开始进行安装和基础设置，然后根据需要探索特定功能。