syncfusion-react-3d-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion React 3D Chart

Syncfusion React 3D 图表

A comprehensive skill for implementing and customizing Syncfusion's 3D Chart component in React applications. This skill helps you create interactive 3D visualizations with column, bar, and stacked chart types.

这是一份在React应用中实现和自定义Syncfusion 3D Chart组件的综合指南。该技能可帮助你创建包含柱状图、条形图和堆叠图类型的交互式3D可视化效果。

When to Use This Skill

何时使用此技能

Use this skill when you need to:

Implement Syncfusion 3D charts in React applications
Create column, bar, or stacked 3D charts
Configure category, numeric, datetime, or logarithmic axes
Bind and manage chart data sources
Customize 3D chart appearance (rotation, depth, walls)
Add data labels, legends, or tooltips to 3D charts
Implement chart selection and interaction
Export or print 3D charts
Support accessibility in 3D visualizations
Troubleshoot 3D chart rendering or performance issues

当你需要以下操作时使用此技能：

在React应用中实现Syncfusion 3D图表
创建柱状、条形或堆叠式3D图表
配置分类轴、数值轴、日期时间轴或对数轴
绑定和管理图表数据源
自定义3D图表外观（旋转角度、深度、边框）
为3D图表添加数据标签、图例或工具提示
实现图表选中与交互功能
导出或打印3D图表
为3D可视化提供无障碍支持
排查3D图表渲染或性能问题

Component Overview

组件概述

Package:

@syncfusion/ej2-react-charts

Main Components:

```
Chart3DComponent
```
- Root 3D chart container
```
Chart3DSeriesCollectionDirective
```
- Series collection wrapper
```
Chart3DSeriesDirective
```
- Individual series configuration
```
Chart3DAxesDirective
```
- Multiple axes configuration

Chart Types: Column, Bar, Stacked Column, Stacked Bar, 100% Stacked Column, 100% Stacked Bar

Axis Types: Category, Numeric, DateTime, Logarithmic

包：

@syncfusion/ej2-react-charts

核心组件：

```
Chart3DComponent
```
- 3D图表根容器
```
Chart3DSeriesCollectionDirective
```
- 系列集合包装器
```
Chart3DSeriesDirective
```
- 单个系列配置项
```
Chart3DAxesDirective
```
- 多轴配置项

图表类型： 柱状图、条形图、堆叠柱状图、堆叠条形图、100%堆叠柱状图、100%堆叠条形图

轴类型： 分类轴、数值轴、日期时间轴、对数轴

Documentation and Navigation Guide

文档与导航指南

API Reference

API参考

📄 Read: references/api-reference.md

Concise list of public props, methods, events, child directives, and a usage snippet. Use this as the canonical in-repo API summary.

📄 阅读： references/api-reference.md

公共属性、方法、事件、子指令的简明列表及使用代码片段。将此作为仓库内的标准API摘要。

Getting Started

快速入门

📄 Read: references/getting-started.md

Installing @syncfusion/ej2-react-charts package
Setting up dependencies and CSS themes
Creating your first 3D chart
Basic Chart3DComponent usage
TypeScript configuration

📄 阅读： references/getting-started.md

安装@syncfusion/ej2-react-charts包
设置依赖项与CSS主题
创建你的第一个3D图表
Chart3DComponent基础用法
TypeScript配置

Chart Types

图表类型

📄 Read: references/chart-types.md

Column chart (vertical 3D bars)
Bar chart (horizontal 3D bars)
Stacked Column chart
Stacked Bar chart
100% Stacked Column chart
100% Stacked Bar chart
When to use each chart type
Series type configuration

📄 阅读： references/chart-types.md

柱状图（垂直3D条）
条形图（水平3D条）
堆叠柱状图
堆叠条形图
100%堆叠柱状图
100%堆叠条形图
各图表类型的适用场景
系列类型配置

Working with Data

数据处理

📄 Read: references/working-with-data.md

Data binding approaches
Data source structure requirements
Series configuration (xName, yName)
Multiple series handling
Dynamic data updates
Empty points handling

📄 阅读： references/working-with-data.md

数据绑定方式
数据源结构要求
系列配置（xName、yName）
多系列处理
动态数据更新
空值点处理

Category Axis

分类轴

📄 Read: references/category-axis.md

Category axis configuration
Label formatting and placement
Category grouping
Interval settings
Use cases for categorical data

📄 阅读： references/category-axis.md

分类轴配置
标签格式化与位置设置
分类分组
间隔设置
分类数据的适用场景

Numeric Axis

数值轴

📄 Read: references/numeric-axis.md

Numeric axis setup
Range configuration (minimum, maximum)
Interval and step size
Label formatting (decimals, currency)
Starting from zero vs auto-range

📄 阅读： references/numeric-axis.md

数值轴设置
范围配置（最小值、最大值）
间隔与步长
标签格式化（小数、货币）
从零开始 vs 自动范围

DateTime Axis

日期时间轴

📄 Read: references/datetime-axis.md

DateTime axis configuration
Date format options
Interval types (days, months, years)
Date range settings
Skeleton formats
Timezone considerations

📄 阅读： references/datetime-axis.md

日期时间轴配置
日期格式选项
间隔类型（天、月、年）
日期范围设置
骨架格式
时区考量

Logarithmic Axis

对数轴

📄 Read: references/logarithmic-axis.md

Logarithmic scale overview
Base configuration (log10, log2, etc.)
Use cases for exponential data
Label formatting for log scales
Range and interval settings

📄 阅读： references/logarithmic-axis.md

对数刻度概述
基数配置（log10、log2等）
指数数据的适用场景
对数刻度的标签格式化
范围与间隔设置

Axis Customization

轴自定义

📄 Read: references/axis-customization.md

Axis titles and labels
Multiple axes (secondary Y-axis)
Axis line styling
Grid lines configuration
Tick marks customization
Label rotation and formatting
Axis crossing values
Inversed axis

📄 阅读： references/axis-customization.md

轴标题与标签
多轴（次要Y轴）
轴线样式
网格线配置
刻度标记自定义
标签旋转与格式化
轴交叉值
反向轴

Multiple Panes

多窗格

📄 Read: references/multiple-panes.md

Multiple pane overview
Row configuration and distribution
Pane height settings
Series assignment to different panes
Axis binding per pane
Use cases for multi-metric comparison

📄 阅读： references/multiple-panes.md

多窗格概述
行配置与分布
窗格高度设置
系列分配到不同窗格
每个窗格的轴绑定
多指标对比的适用场景

Data Labels, Legend, and Tooltip

数据标签、图例与工具提示

📄 Read: references/data-labels-legend-tooltip.md

Data labels configuration and positioning
Label templates and formatting
Legend position and customization
Legend toggle visibility
Tooltip enabling and formatting
Custom tooltip templates
Shared tooltips

📄 阅读： references/data-labels-legend-tooltip.md

数据标签配置与定位
标签模板与格式化
图例位置与自定义
图例可见性切换
工具提示启用与格式化
自定义工具提示模板
共享工具提示

Selection and Interaction

选中与交互

📄 Read: references/selection-interaction.md

Selection modes (Point, Series, Cluster)
Single and multi-selection
Selection events and handlers
Highlight on hover
Selection styling
Interactive features

📄 阅读： references/selection-interaction.md

选中模式（点、系列、集群）
单选与多选
选中事件与处理程序
悬停高亮
选中样式
交互功能

Print and Export

打印与导出

📄 Read: references/print-export.md

Print functionality
Export as PNG, JPEG, SVG
Export as PDF
Export configuration options
File naming conventions
Export events

📄 阅读： references/print-export.md

打印功能
导出为PNG、JPEG、SVG格式
导出为PDF格式
导出配置选项
文件命名规范
导出事件

Appearance and Theming

外观与主题

Built-in themes (Material, Bootstrap, Fluent, Tailwind)
Custom theme creation
Color palettes
3D rotation and tilt angles
3D depth configuration
Wall customization
Chart background and borders
Animation settings

内置主题（Material、Bootstrap、Fluent、Tailwind）
自定义主题创建
调色板
3D旋转与倾斜角度
3D深度配置
边框自定义
图表背景与边框
动画设置

Accessibility

无障碍支持

WCAG 2.1 compliance
Keyboard navigation support
ARIA attributes
Screen reader compatibility
High contrast mode
Focus management
Accessible color schemes

符合WCAG 2.1标准
键盘导航支持
ARIA属性
屏幕阅读器兼容性
高对比度模式
焦点管理
无障碍配色方案

Quick Start Example

快速入门示例

tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { 
  Chart3DComponent, 
  Chart3DSeriesCollectionDirective, 
  Chart3DSeriesDirective,
  Inject,
  Category3D,
  ColumnSeries3D,
  Legend3D,
  DataLabel3D,
  Tooltip3D
} from '@syncfusion/ej2-react-charts';

function SalesChart() {
  const data = [
    { month: 'Jan', sales: 35 },
    { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 },
    { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 }
  ];

  return (
    <Chart3DComponent
      id='chart'
      title='Monthly Sales'
      primaryXAxis={{ valueType: 'Category' }}
      primaryYAxis={{ title: 'Sales (K)' }}
      enableRotation={true}
      rotation={7}
      tilt={10}
      depth={100}
    >
      <Inject services={[ColumnSeries3D, Category3D, Legend3D, DataLabel3D, Tooltip3D]} />
      <Chart3DSeriesCollectionDirective>
        <Chart3DSeriesDirective
          dataSource={data}
          xName='month'
          yName='sales'
          type='Column'
          name='Sales'
        />
      </Chart3DSeriesCollectionDirective>
    </Chart3DComponent>
  );
}

export default SalesChart;
ReactDOM.render(<SalesChart />, document.getElementById('charts'));

tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { 
  Chart3DComponent, 
  Chart3DSeriesCollectionDirective, 
  Chart3DSeriesDirective,
  Inject,
  Category3D,
  ColumnSeries3D,
  Legend3D,
  DataLabel3D,
  Tooltip3D
} from '@syncfusion/ej2-react-charts';

function SalesChart() {
  const data = [
    { month: 'Jan', sales: 35 },
    { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 },
    { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 }
  ];

  return (
    <Chart3DComponent
      id='chart'
      title='Monthly Sales'
      primaryXAxis={{ valueType: 'Category' }}
      primaryYAxis={{ title: 'Sales (K)' }}
      enableRotation={true}
      rotation={7}
      tilt={10}
      depth={100}
    >
      <Inject services={[ColumnSeries3D, Category3D, Legend3D, DataLabel3D, Tooltip3D]} />
      <Chart3DSeriesCollectionDirective>
        <Chart3DSeriesDirective
          dataSource={data}
          xName='month'
          yName='sales'
          type='Column'
          name='Sales'
        />
      </Chart3DSeriesCollectionDirective>
    </Chart3DComponent>
  );
}

export default SalesChart;
ReactDOM.render(<SalesChart />, document.getElementById('charts'));

Common Patterns

常见模式

Basic Column Chart

基础柱状图

tsx

<Chart3DComponent primaryXAxis={{ valueType: 'Category' }}>
  <Inject services={[ColumnSeries3D, Category3D]} />
  <Chart3DSeriesCollectionDirective>
    <Chart3DSeriesDirective
      dataSource={data}
      xName='category'
      yName='value'
      type='Column'
    />
  </Chart3DSeriesCollectionDirective>
</Chart3DComponent>

tsx

<Chart3DComponent primaryXAxis={{ valueType: 'Category' }}>
  <Inject services={[ColumnSeries3D, Category3D]} />
  <Chart3DSeriesCollectionDirective>
    <Chart3DSeriesDirective
      dataSource={data}
      xName='category'
      yName='value'
      type='Column'
    />
  </Chart3DSeriesCollectionDirective>
</Chart3DComponent>

Stacked Column Chart

堆叠柱状图

tsx

<Chart3DComponent primaryXAxis={{ valueType: 'Category' }}>
  <Inject services={[StackingColumnSeries3D, Category3D]} />
  <Chart3DSeriesCollectionDirective>
    <Chart3DSeriesDirective
      dataSource={data1}
      xName='x'
      yName='y'
      type='StackingColumn'
      name='Product A'
    />
    <Chart3DSeriesDirective
      dataSource={data2}
      xName='x'
      yName='y'
      type='StackingColumn'
      name='Product B'
    />
  </Chart3DSeriesCollectionDirective>
</Chart3DComponent>

tsx

<Chart3DComponent primaryXAxis={{ valueType: 'Category' }}>
  <Inject services={[StackingColumnSeries3D, Category3D]} />
  <Chart3DSeriesCollectionDirective>
    <Chart3DSeriesDirective
      dataSource={data1}
      xName='x'
      yName='y'
      type='StackingColumn'
      name='Product A'
    />
    <Chart3DSeriesDirective
      dataSource={data2}
      xName='x'
      yName='y'
      type='StackingColumn'
      name='Product B'
    />
  </Chart3DSeriesCollectionDirective>
</Chart3DComponent>

Bar Chart (Horizontal)

条形图（水平）

tsx

<Chart3DComponent primaryXAxis={{ valueType: 'Category' }}>
  <Inject services={[BarSeries3D, Category3D]} />
  <Chart3DSeriesCollectionDirective>
    <Chart3DSeriesDirective
      dataSource={data}
      xName='category'
      yName='value'
      type='Bar'
    />
  </Chart3DSeriesCollectionDirective>
</Chart3DComponent>

tsx

<Chart3DComponent primaryXAxis={{ valueType: 'Category' }}>
  <Inject services={[BarSeries3D, Category3D]} />
  <Chart3DSeriesCollectionDirective>
    <Chart3DSeriesDirective
      dataSource={data}
      xName='category'
      yName='value'
      type='Bar'
    />
  </Chart3DSeriesCollectionDirective>
</Chart3DComponent>

With Data Labels and Legend

带数据标签与图例

tsx

<Chart3DComponent
  primaryXAxis={{ valueType: 'Category' }}
  legendSettings={{ visible: true }}
>
  <Inject services={[ColumnSeries3D, Category3D, Legend3D, DataLabel3D]} />
  <Chart3DSeriesCollectionDirective>
    <Chart3DSeriesDirective
      dataSource={data}
      xName='x'
      yName='y'
      type='Column'
      name='Sales'
      dataLabel={{ visible: true }}
    />
  </Chart3DSeriesCollectionDirective>
</Chart3DComponent>

tsx

<Chart3DComponent
  primaryXAxis={{ valueType: 'Category' }}
  legendSettings={{ visible: true }}
>
  <Inject services={[ColumnSeries3D, Category3D, Legend3D, DataLabel3D]} />
  <Chart3DSeriesCollectionDirective>
    <Chart3DSeriesDirective
      dataSource={data}
      xName='x'
      yName='y'
      type='Column'
      name='Sales'
      dataLabel={{ visible: true }}
    />
  </Chart3DSeriesCollectionDirective>
</Chart3DComponent>

Custom 3D Rotation

自定义3D旋转

tsx

<Chart3DComponent
  primaryXAxis={{ valueType: 'Category' }}
  enableRotation={true}
  rotation={15}
  tilt={5}
  depth={120}
  wallColor='transparent'
  wallSize={1}
>
  <Inject services={[ColumnSeries3D, Category3D]} />
  <Chart3DSeriesCollectionDirective>
    <Chart3DSeriesDirective
      dataSource={data}
      xName='x'
      yName='y'
      type='Column'
    />
  </Chart3DSeriesCollectionDirective>
</Chart3DComponent>

tsx

<Chart3DComponent
  primaryXAxis={{ valueType: 'Category' }}
  enableRotation={true}
  rotation={15}
  tilt={5}
  depth={120}
  wallColor='transparent'
  wallSize={1}
>
  <Inject services={[ColumnSeries3D, Category3D]} />
  <Chart3DSeriesCollectionDirective>
    <Chart3DSeriesDirective
      dataSource={data}
      xName='x'
      yName='y'
      type='Column'
    />
  </Chart3DSeriesCollectionDirective>
</Chart3DComponent>

Multiple Series with Different Colors

多系列不同颜色

tsx

<Chart3DComponent
  primaryXAxis={{ valueType: 'Category' }}
  palettes={['#E94649', '#F6B53F', '#6FAAB0']}
>
  <Inject services={[ColumnSeries3D, Category3D, Legend3D]} />
  <Chart3DSeriesCollectionDirective>
    <Chart3DSeriesDirective
      dataSource={data1}
      xName='x'
      yName='y'
      type='Column'
      name='Product A'
    />
    <Chart3DSeriesDirective
      dataSource={data2}
      xName='x'
      yName='y'
      type='Column'
      name='Product B'
    />
    <Chart3DSeriesDirective
      dataSource={data3}
      xName='x'
      yName='y'
      type='Column'
      name='Product C'
    />
  </Chart3DSeriesCollectionDirective>
</Chart3DComponent>

tsx

<Chart3DComponent
  primaryXAxis={{ valueType: 'Category' }}
  palettes={['#E94649', '#F6B53F', '#6FAAB0']}
>
  <Inject services={[ColumnSeries3D, Category3D, Legend3D]} />
  <Chart3DSeriesCollectionDirective>
    <Chart3DSeriesDirective
      dataSource={data1}
      xName='x'
      yName='y'
      type='Column'
      name='Product A'
    />
    <Chart3DSeriesDirective
      dataSource={data2}
      xName='x'
      yName='y'
      type='Column'
      name='Product B'
    />
    <Chart3DSeriesDirective
      dataSource={data3}
      xName='x'
      yName='y'
      type='Column'
      name='Product C'
    />
  </Chart3DSeriesCollectionDirective>
</Chart3DComponent>

Key Props Reference

核心属性参考

Chart3DComponent Props

Chart3DComponent 属性

Prop	Type	Description
`primaryXAxis`	Object	Configuration for X-axis (type, title, labels)
`primaryYAxis`	Object	Configuration for Y-axis (range, title, format)
`rotation`	number	Horizontal rotation angle (0-360)
`tilt`	number	Vertical tilt angle (0-90)
`depth`	number	Depth of 3D chart (0-100)
`enableRotation`	boolean	Enable mouse rotation interaction
`wallColor`	string	Color of 3D walls
`wallSize`	number	Thickness of wall borders
`title`	string	Chart title text
`legendSettings`	Object	Legend configuration
`tooltip`	Object	Tooltip settings
`palettes`	string[]	Array of colors for series

属性	类型	描述
`primaryXAxis`	Object	X轴配置（类型、标题、标签）
`primaryYAxis`	Object	Y轴配置（范围、标题、格式）
`rotation`	number	水平旋转角度（0-360）
`tilt`	number	垂直倾斜角度（0-90）
`depth`	number	3D图表深度（0-100）
`enableRotation`	boolean	启用鼠标旋转交互
`wallColor`	string	3D边框颜色
`wallSize`	number	边框厚度
`title`	string	图表标题文本
`legendSettings`	Object	图例配置
`tooltip`	Object	工具提示设置
`palettes`	string[]	系列颜色数组

Chart3DSeriesDirective Props

Chart3DSeriesDirective 属性

Prop	Type	Description
`dataSource`	any[]	Array of data points
`xName`	string	Property name for X-axis values
`yName`	string	Property name for Y-axis values
`type`	string	Chart type: 'Column', 'Bar', 'StackingColumn', 'StackingBar', 'StackingColumn100', 'StackingBar100'
`name`	string	Series name (shown in legend)
`dataLabel`	Object	Data label configuration
`fill`	string	Series color
`opacity`	number	Series opacity (0-1)

属性	类型	描述
`dataSource`	any[]	数据点数组
`xName`	string	X轴值对应的属性名
`yName`	string	Y轴值对应的属性名
`type`	string	图表类型：'Column', 'Bar', 'StackingColumn', 'StackingBar', 'StackingColumn100', 'StackingBar100'
`name`	string	系列名称（显示在图例中）
`dataLabel`	Object	数据标签配置
`fill`	string	系列颜色
`opacity`	number	系列透明度（0-1）

Common Use Cases

常见使用场景

Sales Comparison: Column charts comparing monthly/quarterly sales across products
Survey Results: Bar charts showing survey responses or rankings
Market Share: Stacked column charts displaying market distribution
Time Series: DateTime axis for temporal data visualization
Financial Data: Logarithmic axis for stock prices or exponential growth
Multi-Metric Dashboards: Multiple panes showing different KPIs
Performance Tracking: Stacked 100% charts showing percentage contributions
Category Analysis: Category axis for discrete data grouping
Interactive Reports: Selection and export for user-driven exploration
Accessible Visualizations: WCAG-compliant charts for all users

销售对比：柱状图对比不同产品的月度/季度销售额
调查结果：条形图展示调查响应或排名
市场份额：堆叠柱状图显示市场分布情况
时间序列：日期时间轴用于时序数据可视化
金融数据：对数轴用于股价或指数增长数据
多指标仪表盘：多窗格展示不同关键绩效指标（KPI）
绩效跟踪：100%堆叠图展示贡献占比
分类分析：分类轴用于离散数据分组
交互式报表：选中与导出功能支持用户驱动的探索
无障碍可视化：符合WCAG标准的图表，适配所有用户

TypeScript Support

TypeScript支持

All components are fully typed. Import types as needed:

tsx

import { 
  Chart3DComponent,
  IChart3DLoadedEventArgs,
  IChart3DPointRenderEventArgs,
  Chart3DModel
} from '@syncfusion/ej2-react-charts';

所有组件均完全支持类型定义。按需导入类型：

tsx

import { 
  Chart3DComponent,
  IChart3DLoadedEventArgs,
  IChart3DPointRenderEventArgs,
  Chart3DModel
} from '@syncfusion/ej2-react-charts';

Troubleshooting Quick Reference

快速排查指南

Chart not rendering?

Verify @syncfusion/ej2-react-charts is installed
Check CSS theme imports
Ensure required services are injected

Data not showing?

Verify xName/yName match data property names
Check axis valueType matches data type
Validate data source structure

Performance issues?

Reduce data point count (aggregate if needed)
Disable animations
Optimize data structure

3D effect not working?

Set enableRotation={true}
Configure rotation, tilt, and depth props
Check if series type supports 3D

For detailed troubleshooting, refer to the specific reference files above.

图表未渲染？

确认已安装@syncfusion/ej2-react-charts包
检查CSS主题导入
确保已注入所需服务

数据未显示？

确认xName/yName与数据属性名匹配
检查轴valueType与数据类型匹配
验证数据源结构

性能问题？

减少数据点数量（必要时进行聚合）
禁用动画
优化数据结构

3D效果不生效？

设置enableRotation={true}
配置rotation、tilt和depth属性
检查系列类型是否支持3D

如需详细排查，请参考上述对应参考文档。