syncfusion-react-3d-chart

用途

Syncfusion React 3D Chart 技能用于在 React 应用中实现和定制 Syncfusion 的 3D 图表组件。当需要创建三维柱状图、条形图或堆叠类图表，配置坐标轴、绑定数据源、调整三维外观、添加数据标签/图例/工具提示、实现选择交互、导出或打印图表，以及排查 3D 渲染或性能问题时，可以使用该技能。

主要能力

图表类型：Column（垂直 3D 柱）、Bar（水平 3D 条）、Stacked Column、Stacked Bar、100% Stacked Column、100% Stacked Bar。
坐标轴类型：Category（分类）、Numeric（数值）、DateTime（日期时间）、Logarithmic（对数）。
数据操作：数据绑定、数据源结构要求、序列配置（xName、yName）、多序列处理、动态数据更新、空点处理。
坐标轴定制：轴标题与标签、多轴（次 Y 轴）、轴线样式、网格线、刻度线、标签旋转与格式化、轴交叉值、反转轴。
多窗格：多窗格概览、行配置与分布、窗格高度、序列分配到不同窗格、按窗格绑定轴。
数据标签、图例与工具提示：标签配置与定位、标签模板与格式化、图例位置与定制、图例切换可见性、工具提示启用与格式化、自定义工具提示模板、共享工具提示。
选择与交互：选择模式（Point、Series、Cluster）、单选与多选、选择事件与处理器、悬停高亮、选择样式。
打印与导出：打印功能、导出为 PNG/JPEG/SVG、导出为 PDF、导出配置选项、文件命名约定、导出事件。
外观与主题：内置主题（Material、Bootstrap、Fluent、Tailwind）、自定义主题、调色板、3D 旋转与倾斜角度、3D 深度配置、墙面定制、图表背景与边框、动画设置。
无障碍：WCAG 2.1 合规、键盘导航、ARIA 属性、屏幕阅读器兼容、高对比度模式、焦点管理、无障碍配色。

使用方式

组件来自 @syncfusion/ej2-react-charts 包。主要组件包括：

Chart3DComponent：根 3D 图表容器
Chart3DSeriesCollectionDirective：序列集合包装器
Chart3DSeriesDirective：单个序列配置
Chart3DAxesDirective：多轴配置

快速开始示例：

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'));

常见模式包括：基础柱状图、堆叠柱状图、水平条形图、带数据标签与图例、自定义 3D 旋转、多序列不同颜色等。

关键属性参考：

Chart3DComponent 属性：primaryXAxis（X 轴配置）、primaryYAxis（Y 轴配置）、rotation（水平旋转角度 0-360）、tilt（垂直倾斜角度 0-90）、depth（3D 深度 0-100）、enableRotation（启用鼠标旋转交互）、wallColor（3D 墙面颜色）、wallSize（墙边框厚度）、title（图表标题）、legendSettings（图例配置）、tooltip（工具提示设置）、palettes（序列颜色数组）。

Chart3DSeriesDirective 属性：dataSource（数据点数组）、xName（X 轴值属性名）、yName（Y 轴值属性名）、type（图表类型：'Column'、'Bar'、'StackingColumn'、'StackingBar'、'StackingColumn100'、'StackingBar100'）、name（序列名称，显示在图例中）、dataLabel（数据标签配置）、fill（序列颜色）、opacity（序列不透明度 0-1）。

TypeScript 支持：所有组件均有完整类型定义，可按需导入类型，例如 Chart3DComponent、IChart3DLoadedEventArgs、IChart3DPointRenderEventArgs、Chart3DModel。

适用场景

销售对比：用柱状图比较各产品月度/季度销售额
调查结果：用条形图展示调查回复或排名
市场份额：用堆叠柱状图展示市场分布
时间序列：用日期时间轴可视化时间数据
金融数据：用对数轴展示股价或指数增长
多指标仪表板：用多窗格展示不同 KPI
绩效跟踪：用 100% 堆叠图展示百分比贡献
分类分析：用分类轴对离散数据分组
交互式报告：通过选择和导出支持用户探索
无障碍可视化：符合 WCAG 的图表

限制

资料未提供该组件的收费、价格、平台兼容性、性能上限等具体限制信息。排查问题时，资料建议检查包是否安装、CSS 主题导入、所需服务是否注入、xName/yName 是否匹配数据属性名、轴 valueType 是否匹配数据类型、数据源结构是否有效；性能问题可减少数据点、禁用动画、优化数据结构；3D 效果不生效时检查 enableRotation、rotation/tilt/depth 配置以及序列类型是否支持 3D。

技能介绍

用途

主要能力

使用方式

适用场景

限制