syncfusion-react-accumulation-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion React Accumulation Charts

实现Syncfusion React Accumulation Charts

A comprehensive skill for implementing Syncfusion's React Accumulation Chart components (

AccumulationChartComponent

), which provide circular and hierarchical data visualizations including Pie, Doughnut, Funnel, and Pyramid charts with rich interactive features, export capabilities, and full accessibility support.

这是一份关于实现Syncfusion React Accumulation Chart组件（

AccumulationChartComponent

）的全面指南，该组件提供圆形和层级化数据可视化功能，包括饼图、环形图、漏斗图和金字塔图，具备丰富的交互特性、导出功能以及完整的无障碍访问支持。

When to Use This Skill

何时使用此技能

Use this skill when you need to:

Create pie or doughnut charts for proportional data display
Implement funnel or pyramid charts for hierarchical/process visualization
Display percentage-based or categorical data in circular layouts
Add interactive features like tooltips, legends, and data labels
Implement smart label positioning to avoid overlaps
Create drill-down or multi-level accumulation charts
Apply explode effects to highlight specific data points
Group small data values for better visualization
Customize chart appearance with themes, colors, and patterns
Handle empty or missing data points elegantly
Implement accessible data visualizations with WCAG compliance

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

创建饼图或环形图以展示比例数据
实现漏斗图或金字塔图以可视化层级/流程数据
以圆形布局展示基于百分比或分类的数据
添加工具提示、图例和数据标签等交互功能
实现智能标签定位以避免重叠
创建钻取式或多层级累积图表
应用爆炸效果以突出特定数据点
对小数据值进行分组以提升可视化效果
通过主题、颜色和图案自定义图表外观
优雅处理空值或缺失的数据点
实现符合WCAG标准的无障碍数据可视化

Component Overview

组件概述

The Syncfusion React Accumulation Chart component provides four primary chart types:

Pie Chart: Circular chart divided into slices representing data proportions
Doughnut Chart: Pie chart with a hollow center (configurable inner radius)
Funnel Chart: Inverted triangle showing progressive reduction (sales funnels, conversion rates)
Pyramid Chart: Triangle showing hierarchical data (population pyramids, organizational structures)

Key Features:

Smart labels that avoid overlapping
Grouping based on value or point count
Interactive tooltips and legends
Explode effects for emphasis
Semi-pie charts with custom angles
Multi-level drill-down capability
Border radius for modern appearance
Pattern fills and custom colors

Syncfusion React Accumulation Chart组件提供四种主要图表类型：

饼图（Pie Chart）：将圆形划分为多个扇区，代表数据的比例
环形图（Doughnut Chart）：带有空心中心的饼图（内半径可配置）
漏斗图（Funnel Chart）：倒三角形，展示数据的逐步缩减（如销售漏斗、转化率）
金字塔图（Pyramid Chart）：正三角形，展示层级数据（如人口金字塔、组织结构）

核心功能：

避免重叠的智能标签
基于值或点数的数据分组
交互式工具提示和图例
用于强调的爆炸效果
可自定义角度的半饼图
多层级钻取能力
现代外观的圆角边框
图案填充和自定义颜色

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Installing @syncfusion/ej2-react-charts package
Setting up React project (Vite or Create React App)
Importing AccumulationChartComponent
Registering CSS themes
Creating your first pie chart with data binding
Understanding AccumulationSeriesCollectionDirective pattern
Basic series configuration (xName, yName, dataSource)

📄 阅读： references/getting-started.md

安装@syncfusion/ej2-react-charts包
搭建React项目（Vite或Create React App）
导入AccumulationChartComponent
注册CSS主题
创建首个带数据绑定的饼图
理解AccumulationSeriesCollectionDirective模式
基础系列配置（xName、yName、dataSource）

Pie and Doughnut Charts

饼图与环形图

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

Creating basic pie charts with PieSeries injection
Customizing radius (default 80%, custom values)
Positioning pie center (centerX, centerY properties)
Creating doughnut charts with innerRadius
Various radius pie charts (different slice sizes)
Semi-pie charts using startAngle and endAngle
Color and text mapping from data source
Border radius for modern rounded slices
Hiding/showing borders on mouse hover
Applying pattern fills (stripes, dots, grids)
Multi-level drill-down with pointClick event
Point customization with pointRender event

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

通过注入PieSeries创建基础饼图
自定义半径（默认80%，支持自定义值）
定位饼图中心（centerX、centerY属性）
通过innerRadius创建环形图
不同半径的饼图（扇区大小不同）
使用startAngle和endAngle创建半饼图
从数据源映射颜色和文本
为扇区设置现代圆角边框
鼠标悬停时显示/隐藏边框
应用图案填充（条纹、圆点、网格）
通过pointClick事件实现多层级钻取
通过pointRender事件自定义数据点

Funnel and Pyramid Charts

漏斗图与金字塔图

📄 Read: references/funnel-pyramid-charts.md

Creating funnel charts with FunnelSeries injection
Funnel size customization (width and height)
Neck size configuration (neckWidth, neckHeight)
Gap between segments (gapRatio 0 to 1)
Funnel rendering modes (Standard vs Trapezoidal)
Creating pyramid charts with PyramidSeries injection
Pyramid rendering modes (Linear vs Surface)
Pyramid size customization
Explode effects (explode, explodeOffset, explodeIndex)
Smart data label positioning for funnels/pyramids

📄 阅读： references/funnel-pyramid-charts.md

通过注入FunnelSeries创建漏斗图
自定义漏斗图尺寸（宽度和高度）
配置颈部尺寸（neckWidth、neckHeight）
扇区间的间隙（gapRatio 0至1）
漏斗图渲染模式（标准型 vs 梯形）
通过注入PyramidSeries创建金字塔图
金字塔图渲染模式（线性 vs 曲面）
自定义金字塔图尺寸
爆炸效果（explode、explodeOffset、explodeIndex）
漏斗图/金字塔图的智能数据标签定位

Data Labels

数据标签

📄 Read: references/data-labels.md

Enabling data labels (visible property, AccumulationDataLabel injection)
Positioning labels (Inside vs Outside)
Rotating data labels (angle and enableRotation)
Smart labels to prevent overlapping (enableSmartLabels)
Formatting label text (n, p, c number formats)
Custom data label templates with HTML
Connector line customization (type, color, width, length, dashArray)
Text mapping from data source (name property)
Customizing labels with textRender event
Text wrapping (textWrap, maxWidth)
Displaying percentages in labels (textRender vs template approaches)

📄 阅读： references/data-labels.md

启用数据标签（visible属性、注入AccumulationDataLabel）
标签定位（内部 vs 外部）
旋转数据标签（angle和enableRotation）
智能标签防止重叠（enableSmartLabels）
格式化标签文本（n、p、c数字格式）
使用HTML自定义数据标签模板
连接线自定义（类型、颜色、宽度、长度、dashArray）
从数据源映射文本（name属性）
通过textRender事件自定义标签
文本换行（textWrap、maxWidth）
在标签中显示百分比（textRender vs 模板方式）

Legend Configuration

图例配置

📄 Read: references/legend.md

Enabling legend (AccumulationLegend injection)
Position and alignment (left, right, top, bottom, center, far, near)
Reversing legend item order
Legend shape customization (Circle, Rectangle, Triangle, etc.)
Legend and legend item size configuration
Automatic pagination for many items
Text wrapping for long labels (textWrap, maximumLabelWidth)
Animation on legend click toggle
Legend title configuration and styling
Arrow page navigation (enablePages false)
Legend item padding adjustment
Layout options (horizontal, vertical, auto with maximumColumns)
Custom legend templates with HTML
Fixed width legend items

📄 阅读： references/legend.md

启用图例（注入AccumulationLegend）
位置与对齐方式（左、右、上、下、居中、远、近）
反转图例项顺序
自定义图例形状（圆形、矩形、三角形等）
配置图例和图例项尺寸
多图例项的自动分页
长标签的文本换行（textWrap、maximumLabelWidth）
点击图例切换时的动画
图例标题的配置与样式
箭头分页导航（enablePages设为false）
调整图例项间距
布局选项（水平、垂直、自动带最大列数）
使用HTML自定义图例模板
固定宽度的图例项

Tooltip Customization

工具提示自定义

📄 Read: references/tooltip.md

Enabling tooltips (AccumulationTooltip injection)
Custom tooltip headers
Format strings (${point.x}, ${point.y}, ${series.name})
Tooltip mapping from data source (tooltipMappingName)
Custom tooltip templates with HTML/React components
Fixed tooltip positioning (location property)
Tooltip styling and appearance

📄 阅读： references/tooltip.md

启用工具提示（注入AccumulationTooltip）
自定义工具提示标题
格式字符串（${point.x}、${point.y}、${series.name}）
从数据源映射工具提示（tooltipMappingName）
使用HTML/React组件自定义工具提示模板
固定工具提示位置（location属性）
工具提示样式与外观

Data Grouping

数据分组

📄 Read: references/grouping.md

Grouping by value threshold (groupTo property)
Grouping by point count
Group mode configuration (Value vs Point)
Custom group names and labels
Group appearance customization
When to use grouping for better visualization

📄 阅读： references/grouping.md

基于值阈值的分组（groupTo属性）
基于点数的分组
分组模式配置（值 vs 点数）
自定义分组名称和标签
分组外观自定义
何时使用分组提升可视化效果

Annotations

注释

📄 Read: references/annotations.md

Adding annotations with AccumulationAnnotation injection
Annotation content and HTML templates
Positioning annotations (x, y coordinates)
Coordinate units (Pixel vs Point)
Multiple annotations per chart
Dynamic annotation updates

📄 阅读： references/annotations.md

通过注入AccumulationAnnotation添加注释
注释内容与HTML模板
定位注释（x、y坐标）
坐标单位（像素 vs 数据点）
单图表多注释
动态更新注释

Customization and Styling

自定义与样式

📄 Read: references/customization.md

Point-level customization with pointRender event
Custom color schemes and palettes
Setting colors per data point (fill property)
Border customization (width, color)
Pattern fills for slices (applyPattern)
Point-specific styling based on data values
Conditional styling patterns

📄 阅读： references/customization.md

通过pointRender事件实现数据点级别的自定义
自定义配色方案和调色板
为每个数据点设置颜色（fill属性）
边框自定义（宽度、颜色）
为扇区添加图案填充（applyPattern）
基于数据值的特定数据点样式
条件样式模式

Accessibility Features

无障碍功能

📄 Read: references/accessibility.md

WCAG 2.1 compliance features
Keyboard navigation support (Tab, Arrow keys)
ARIA attributes configuration
Screen reader support and announcements
High contrast mode compatibility
Advanced accessibility configuration
Focus indicators and visible focus

📄 阅读： references/accessibility.md

符合WCAG 2.1标准的功能
键盘导航支持（Tab、方向键）
ARIA属性配置
屏幕阅读器支持与播报
高对比度模式兼容性
高级无障碍配置
焦点指示器与可见焦点

Empty Points Handling

空值处理

📄 Read: references/empty-points.md

Handling null, undefined, or NaN data
Empty point modes (Zero, Drop, Average, Gap)
Customizing empty point appearance
Fill and border configuration for empty points
When to use each empty point mode

📄 阅读： references/empty-points.md

处理null、undefined或NaN数据
空值模式（零值、丢弃、平均值、间隙）
自定义空值点外观
空值点的填充与边框配置
何时使用每种空值模式

Appearance and Theming

外观与主题

📄 Read: references/appearance-theming.md

Built-in themes (Material, Bootstrap, Fluent, Tailwind, Fabric)
Importing and applying themes
Gradient fills for slices
Title and subtitle configuration
Dynamic data updates and animation
Chart dimensions and responsive sizing

📄 阅读： references/appearance-theming.md

内置主题（Material、Bootstrap、Fluent、Tailwind、Fabric）
导入与应用主题
扇区的渐变填充
标题与副标题配置
动态数据更新与动画
图表尺寸与响应式布局

Export and Print

导出与打印

📄 Read: references/export-print.md

Enabling export functionality with Export module
Export to image formats (PNG, JPEG)
Export to PDF and SVG
Export customization with beforeExport event
Print chart functionality
Exporting multiple charts
After export event handling
File naming conventions and best practices

📄 阅读： references/export-print.md

通过Export模块启用导出功能
导出为图片格式（PNG、JPEG）
导出为PDF和SVG
通过beforeExport事件自定义导出
打印图表功能
导出多个图表
afterExport事件处理
文件命名规范与最佳实践

API Reference

API参考

📄 Read: references/api-reference.md

Complete AccumulationChartComponent properties reference
AccumulationSeriesDirective properties
All methods (export, print, setAnnotationValue, calculateBounds)
All events (lifecycle, rendering, mouse, selection, export)
Common model interfaces (LegendSettings, TooltipSettings, DataLabel)
Module services and injection requirements
Event argument interfaces
Selection patterns reference
Themes reference
Complete usage examples with TypeScript

📄 阅读： references/api-reference.md

完整的AccumulationChartComponent属性参考
AccumulationSeriesDirective属性
所有方法（export、print、setAnnotationValue、calculateBounds）
所有事件（生命周期、渲染、鼠标、选择、导出）
通用模型接口（LegendSettings、TooltipSettings、DataLabel）
模块服务与注入要求
事件参数接口
选择模式参考
主题参考
完整的TypeScript使用示例

Quick Start Example

快速入门示例

Here's a minimal example to create a basic pie chart:

tsx

import { 
  AccumulationChartComponent, 
  AccumulationSeriesCollectionDirective, 
  AccumulationSeriesDirective,
  Inject,
  AccumulationLegend,
  AccumulationDataLabel,
  AccumulationTooltip,
  PieSeries
} from '@syncfusion/ej2-react-charts';

function App() {
  const data = [
    { x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
    { x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
    { x: 'Edge', y: 5.0, text: 'Edge: 5.0%' },
    { x: 'Firefox', y: 4.8, text: 'Firefox: 4.8%' },
    { x: 'Others', y: 4.3, text: 'Others: 4.3%' }
  ];

  return (
    <AccumulationChartComponent 
      id='pie-chart'
      title='Browser Market Share'
      legendSettings={{ visible: true }}
      tooltip={{ enable: true }}
      enableSmartLabels={true}
    >
      <Inject services={[
        AccumulationLegend, 
        AccumulationDataLabel, 
        AccumulationTooltip, 
        PieSeries
      ]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          radius='90%'
          dataLabel={{
            visible: true,
            position: 'Outside',
            name: 'text'
          }}
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

以下是创建基础饼图的最简示例：

tsx

import { 
  AccumulationChartComponent, 
  AccumulationSeriesCollectionDirective, 
  AccumulationSeriesDirective,
  Inject,
  AccumulationLegend,
  AccumulationDataLabel,
  AccumulationTooltip,
  PieSeries
} from '@syncfusion/ej2-react-charts';

function App() {
  const data = [
    { x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
    { x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
    { x: 'Edge', y: 5.0, text: 'Edge: 5.0%' },
    { x: 'Firefox', y: 4.8, text: 'Firefox: 4.8%' },
    { x: 'Others', y: 4.3, text: 'Others: 4.3%' }
  ];

  return (
    <AccumulationChartComponent 
      id='pie-chart'
      title='Browser Market Share'
      legendSettings={{ visible: true }}
      tooltip={{ enable: true }}
      enableSmartLabels={true}
    >
      <Inject services={[
        AccumulationLegend, 
        AccumulationDataLabel, 
        AccumulationTooltip, 
        PieSeries
      ]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          radius='90%'
          dataLabel={{
            visible: true,
            position: 'Outside',
            name: 'text'
          }}
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Common Patterns

常见模式

Pattern 1: Doughnut Chart with Legend

模式1：带图例的环形图

tsx

<AccumulationChartComponent 
  id='doughnut-chart'
  legendSettings={{ visible: true, position: 'Right' }}
>
  <Inject services={[AccumulationLegend, PieSeries]} />
  <AccumulationSeriesCollectionDirective>
    <AccumulationSeriesDirective
      dataSource={data}
      xName='category'
      yName='value'
      innerRadius='40%'  // Creates doughnut hole
      radius='100%'
    />
  </AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>

tsx

<AccumulationChartComponent 
  id='doughnut-chart'
  legendSettings={{ visible: true, position: 'Right' }}
>
  <Inject services={[AccumulationLegend, PieSeries]} />
  <AccumulationSeriesCollectionDirective>
    <AccumulationSeriesDirective
      dataSource={data}
      xName='category'
      yName='value'
      innerRadius='40%'  // 创建环形空心
      radius='100%'
    />
  </AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>

Pattern 2: Funnel Chart with Data Labels

模式2：带数据标签的漏斗图

tsx

<AccumulationChartComponent id='funnel-chart'>
  <Inject services={[FunnelSeries, AccumulationDataLabel]} />
  <AccumulationSeriesCollectionDirective>
    <AccumulationSeriesDirective
      dataSource={salesData}
      xName='stage'
      yName='count'
      type='Funnel'
      neckWidth='25%'
      neckHeight='5%'
      gapRatio={0.08}
      dataLabel={{ visible: true, position: 'Outside' }}
    />
  </AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>

tsx

<AccumulationChartComponent id='funnel-chart'>
  <Inject services={[FunnelSeries, AccumulationDataLabel]} />
  <AccumulationSeriesCollectionDirective>
    <AccumulationSeriesDirective
      dataSource={salesData}
      xName='stage'
      yName='count'
      type='Funnel'
      neckWidth='25%'
      neckHeight='5%'
      gapRatio={0.08}
      dataLabel={{ visible: true, position: 'Outside' }}
    />
  </AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>

Pattern 3: Semi-Pie Chart (Gauge Style)

模式3：半饼图（仪表样式）

tsx

<AccumulationSeriesDirective
  dataSource={data}
  xName='x'
  yName='y'
  startAngle={270}  // Start from bottom
  endAngle={90}     // End at bottom (semi-circle)
  radius='100%'
  innerRadius='40%'
  dataLabel={{ visible: true, position: 'Inside' }}
/>

tsx

<AccumulationSeriesDirective
  dataSource={data}
  xName='x'
  yName='y'
  startAngle={270}  // 从底部开始
  endAngle={90}     // 到底部结束（半圆）
  radius='100%'
  innerRadius='40%'
  dataLabel={{ visible: true, position: 'Inside' }}
/>

Pattern 4: Exploded Pie Chart

模式4：爆炸式饼图

tsx

<AccumulationSeriesDirective
  dataSource={data}
  xName='product'
  yName='sales'
  explode={true}           // Enable click-to-explode
  explodeOffset='10%'      // Distance when exploded
  explodeIndex={2}         // Explode third slice by default
  explodeAll={false}       // Don't explode all at once
/>

tsx

<AccumulationSeriesDirective
  dataSource={data}
  xName='product'
  yName='sales'
  explode={true}           // 启用点击爆炸功能
  explodeOffset='10%'      // 爆炸时的距离
  explodeIndex={2}         // 默认爆炸第三个扇区
  explodeAll={false}       // 不一次性爆炸所有扇区
/>

API Reference

API参考

AccumulationChartComponent Properties

AccumulationChartComponent属性

Core Properties

核心属性

Property	Type	Default	Description
`dataSource`	Object[] \| DataManager	''	Data source for the chart
`series`	AccumulationSeriesModel[]	-	Collection of series configurations
`title`	string	null	Main title of the chart
`subTitle`	string	null	Subtitle displayed below the main title
`width`	string	null	Width of the chart ('100px', '100%')
`height`	string	null	Height of the chart ('100px', '100%')
`theme`	AccumulationTheme	'Material'	Visual theme (Material, Bootstrap5, Fluent, Tailwind, etc.)
`background`	string	null	Background color (hex or rgba)
`backgroundImage`	string	null	Background image URL

属性	类型	默认值	描述
`dataSource`	Object[] \| DataManager	''	图表的数据源
`series`	AccumulationSeriesModel[]	-	系列配置集合
`title`	string	null	图表主标题
`subTitle`	string	null	主标题下方的副标题
`width`	string	null	图表宽度（如'100px'、'100%'）
`height`	string	null	图表高度（如'100px'、'100%'）
`theme`	AccumulationTheme	'Material'	视觉主题（Material、Bootstrap5、Fluent、Tailwind等）
`background`	string	null	背景颜色（十六进制或rgba）
`backgroundImage`	string	null	背景图片URL

Feature Properties

功能属性

Property	Type	Default	Description
`enableSmartLabels`	boolean	true	Prevent label overlapping with smart positioning
`enableAnimation`	boolean	true	Enable animations for chart rendering
`enableBorderOnMouseMove`	boolean	true	Show border on mouse hover
`enableExport`	boolean	true	Enable export functionality (JPEG, PNG, SVG, PDF)
`useGroupingSeparator`	boolean	false	Use thousand separators in numbers
`enablePersistence`	boolean	false	Persist component state across page reloads
`enableRtl`	boolean	false	Enable right-to-left rendering
`enableHtmlSanitizer`	boolean	false	Sanitize untrusted HTML values

属性	类型	默认值	描述
`enableSmartLabels`	boolean	true	通过智能定位防止标签重叠
`enableAnimation`	boolean	true	启用图表渲染动画
`enableBorderOnMouseMove`	boolean	true	鼠标悬停时显示边框
`enableExport`	boolean	true	启用导出功能（JPEG、PNG、SVG、PDF）
`useGroupingSeparator`	boolean	false	数字中使用千位分隔符
`enablePersistence`	boolean	false	页面重载时保留组件状态
`enableRtl`	boolean	false	启用从右到左渲染
`enableHtmlSanitizer`	boolean	false	清理不可信的HTML值

Interactive Properties

交互属性

Property	Type	Default	Description
`selectionMode`	AccumulationSelectionMode	'None'	Point selection mode ('None', 'Point')
`selectionPattern`	SelectionPattern	'None'	Pattern for selected points (Chessboard, Dots, etc.)
`highlightMode`	AccumulationHighlightMode	'None'	Point highlighting mode ('None', 'Point')
`highlightPattern`	SelectionPattern	'None'	Pattern for highlighted points
`highlightColor`	string	''	Color for highlighted points
`isMultiSelect`	boolean	false	Allow multiple point selection
`selectedDataIndexes`	IndexesModel[]	[]	Initially selected point indexes

属性	类型	默认值	描述
`selectionMode`	AccumulationSelectionMode	'None'	数据点选择模式（'None'、'Point'）
`selectionPattern`	SelectionPattern	'None'	选中数据点的图案（棋盘格、圆点等）
`highlightMode`	AccumulationHighlightMode	'None'	数据点高亮模式（'None'、'Point'）
`highlightPattern`	SelectionPattern	'None'	高亮数据点的图案
`highlightColor`	string	''	高亮数据点的颜色
`isMultiSelect`	boolean	false	允许多个数据点选择
`selectedDataIndexes`	IndexesModel[]	[]	初始选中的数据点索引

Layout Properties

布局属性

Property	Type	Default	Description
`center`	PieCenterModel	{x: '50%', y: '50%'}	Center position of pie chart
`margin`	MarginModel	-	Chart margins (left, right, top, bottom)
`border`	BorderModel	-	Chart border (color, width)
`legendSettings`	LegendSettingsModel	-	Legend configuration
`tooltip`	TooltipSettingsModel	-	Tooltip configuration
`annotations`	AccumulationAnnotationSettingsModel[]	-	Chart annotations
`centerLabel`	CenterLabelModel	-	Label at chart center

属性	类型	默认值	描述
`center`	PieCenterModel	{x: '50%', y: '50%'}	饼图中心位置
`margin`	MarginModel	-	图表边距（左、右、上、下）
`border`	BorderModel	-	图表边框（颜色、宽度）
`legendSettings`	LegendSettingsModel	-	图例配置
`tooltip`	TooltipSettingsModel	-	工具提示配置
`annotations`	AccumulationAnnotationSettingsModel[]	-	图表注释
`centerLabel`	CenterLabelModel	-	图表中心标签

Accessibility Properties

无障碍属性

Property	Type	Default	Description
`accessibility`	AccessibilityModel	-	Accessibility configuration for screen readers
`focusBorderColor`	string	null	Custom focus border color
`focusBorderWidth`	number	1.5	Focus border width in pixels
`focusBorderMargin`	number	0	Focus border margin in pixels
`locale`	string	'en-US'	Localization culture string

属性	类型	默认值	描述
`accessibility`	AccessibilityModel	-	屏幕阅读器的无障碍配置
`focusBorderColor`	string	null	自定义焦点边框颜色
`focusBorderWidth`	number	1.5	焦点边框宽度（像素）
`focusBorderMargin`	number	0	焦点边框边距（像素）
`locale`	string	'en-US'	本地化文化字符串

AccumulationSeriesDirective Properties

AccumulationSeriesDirective属性

Property	Type	Default	Description
`type`	string	'Pie'	Chart type ('Pie', 'Funnel', 'Pyramid')
`dataSource`	Object[]	-	Data array for the series
`xName`	string	-	Property name for category/label values
`yName`	string	-	Property name for numeric values
`radius`	string	'80%'	Outer radius of pie/doughnut
`innerRadius`	string	'0%'	Inner radius (doughnut hole)
`startAngle`	number	0	Starting angle (0-360 degrees)
`endAngle`	number	360	Ending angle (0-360 degrees)
`explode`	boolean	false	Enable click-to-explode functionality
`explodeAll`	boolean	false	Explode all slices initially
`explodeIndex`	number	-	Index of slice to explode by default
`explodeOffset`	string	'30%'	Distance when slice is exploded
`neckWidth`	string	'20%'	Funnel neck width
`neckHeight`	string	'20%'	Funnel neck height
`gapRatio`	number	0	Gap between funnel/pyramid segments (0-1)
`width`	string	'80%'	Funnel/pyramid width
`height`	string	'80%'	Funnel/pyramid height
`groupTo`	string	-	Value/count threshold for grouping
`groupMode`	string	'Value'	Grouping mode ('Value', 'Point')
`pointColorMapping`	string	-	Property name for point colors
`borderRadius`	number	0	Corner radius for rounded slices
`applyPattern`	boolean	false	Apply pattern fills to slices

属性	类型	默认值	描述
`type`	string	'Pie'	图表类型（'Pie'、'Funnel'、'Pyramid'）
`dataSource`	Object[]	-	系列的数据源数组
`xName`	string	-	分类/标签值的属性名
`yName`	string	-	数值的属性名
`radius`	string	'80%'	饼图/环形图的外半径
`innerRadius`	string	'0%'	内半径（环形图空心）
`startAngle`	number	0	起始角度（0-360度）
`endAngle`	number	360	结束角度（0-360度）
`explode`	boolean	false	启用点击爆炸功能
`explodeAll`	boolean	false	初始时爆炸所有扇区
`explodeIndex`	number	-	默认爆炸的扇区索引
`explodeOffset`	string	'30%'	扇区爆炸时的距离
`neckWidth`	string	'20%'	漏斗图颈部宽度
`neckHeight`	string	'20%'	漏斗图颈部高度
`gapRatio`	number	0	漏斗图/金字塔图扇区间的间隙（0-1）
`width`	string	'80%'	漏斗图/金字塔图宽度
`height`	string	'80%'	漏斗图/金字塔图高度
`groupTo`	string	-	分组的阈值（值/数量）
`groupMode`	string	'Value'	分组模式（'Value'、'Point'）
`pointColorMapping`	string	-	数据点颜色的属性名
`borderRadius`	number	0	扇区圆角半径
`applyPattern`	boolean	false	为扇区应用图案填充

Methods

方法

Method	Parameters	Description
`export()`	type: ExportType, fileName: string	Export chart (JPEG, PNG, SVG, PDF)
`print()`	id?: string[] \| string \| Element	Print chart
`calculateBounds()`	-	Calculate chart bounds
`setAnnotationValue()`	annotationIndex: number, content: string	Update annotation dynamically

方法	参数	描述
`export()`	type: ExportType, fileName: string	导出图表（JPEG、PNG、SVG、PDF）
`print()`	id?: string[] \| string \| Element	打印图表
`calculateBounds()`	-	计算图表边界
`setAnnotationValue()`	annotationIndex: number, content: string	动态更新注释

Events

事件

Event	Args Type	Description
`load`	IAccLoadedEventArgs	Before chart loads
`loaded`	IAccLoadedEventArgs	After chart loads
`seriesRender`	IAccSeriesRenderEventArgs	Before series renders
`pointRender`	IAccPointRenderEventArgs	Before each point renders
`textRender`	IAccTextRenderEventArgs	Before data labels render
`legendRender`	ILegendRenderEventArgs	Before legend renders
`legendClick`	IAccLegendClickEventArgs	When legend item is clicked
`annotationRender`	IAnnotationRenderEventArgs	Before annotation renders
`tooltipRender`	ITooltipRenderEventArgs	Before tooltip renders
`pointClick`	IPointEventArgs	When point is clicked
`pointMove`	IPointEventArgs	When mouse moves over point
`chartMouseClick`	IMouseEventArgs	When chart is clicked
`chartMouseDown`	IMouseEventArgs	On mouse down event
`chartMouseUp`	IMouseEventArgs	On mouse up event
`chartMouseMove`	IMouseEventArgs	When mouse moves over chart
`chartMouseLeave`	IMouseEventArgs	When mouse leaves chart
`chartDoubleClick`	IMouseEventArgs	When chart is double-clicked
`animationComplete`	IAccAnimationCompleteEventArgs	After animation completes
`selectionComplete`	IAccSelectionCompleteEventArgs	After selection completes
`resized`	IAccResizeEventArgs	After window resize
`beforeResize`	IAccBeforeResizeEventArgs	Before window resize
`beforePrint`	IPrintEventArgs	Before print starts
`beforeExport`	IExportEventArgs	Before export starts
`afterExport`	IAfterExportEventArgs	After export completes

事件	参数类型	描述
`load`	IAccLoadedEventArgs	图表加载前触发
`loaded`	IAccLoadedEventArgs	图表加载后触发
`seriesRender`	IAccSeriesRenderEventArgs	系列渲染前触发
`pointRender`	IAccPointRenderEventArgs	每个数据点渲染前触发
`textRender`	IAccTextRenderEventArgs	数据标签渲染前触发
`legendRender`	ILegendRenderEventArgs	图例渲染前触发
`legendClick`	IAccLegendClickEventArgs	点击图例项时触发
`annotationRender`	IAnnotationRenderEventArgs	注释渲染前触发
`tooltipRender`	ITooltipRenderEventArgs	工具提示渲染前触发
`pointClick`	IPointEventArgs	点击数据点时触发
`pointMove`	IPointEventArgs	鼠标移过数据点时触发
`chartMouseClick`	IMouseEventArgs	点击图表时触发
`chartMouseDown`	IMouseEventArgs	鼠标按下时触发
`chartMouseUp`	IMouseEventArgs	鼠标松开时触发
`chartMouseMove`	IMouseEventArgs	鼠标移过图表时触发
`chartMouseLeave`	IMouseEventArgs	鼠标离开图表时触发
`chartDoubleClick`	IMouseEventArgs	双击图表时触发
`animationComplete`	IAccAnimationCompleteEventArgs	动画完成后触发
`selectionComplete`	IAccSelectionCompleteEventArgs	选择完成后触发
`resized`	IAccResizeEventArgs	窗口调整大小后触发
`beforeResize`	IAccBeforeResizeEventArgs	窗口调整大小前触发
`beforePrint`	IPrintEventArgs	打印开始前触发
`beforeExport`	IExportEventArgs	导出开始前触发
`afterExport`	IAfterExportEventArgs	导出完成后触发

Key Props Summary

关键属性汇总

Property	Purpose	Example Values
`type`	Chart type	`'Pie'` , `'Funnel'` , `'Pyramid'`
`radius`	Outer size	`'90%'` , `'100%'`
`innerRadius`	Doughnut hole	`'0%'` (pie), `'40%'` (doughnut)
`startAngle` / `endAngle`	Slice range	`0` to `360`
`explode`	Enable explode	`true` , `false`
`neckWidth` / `neckHeight`	Funnel neck	`'25%'` , `'5%'`
`gapRatio`	Segment spacing	`0` to `1`
`enableSmartLabels`	Smart positioning	`true` , `false`

属性	用途	示例值
`type`	图表类型	`'Pie'` , `'Funnel'` , `'Pyramid'`
`radius`	外部尺寸	`'90%'` , `'100%'`
`innerRadius`	环形空心	`'0%'` （饼图）, `'40%'` （环形图）
`startAngle` / `endAngle`	扇区范围	`0` 至 `360`
`explode`	启用爆炸效果	`true` , `false`
`neckWidth` / `neckHeight`	漏斗颈部	`'25%'` , `'5%'`
`gapRatio`	扇区间距	`0` 至 `1`
`enableSmartLabels`	智能定位	`true` , `false`

Common Use Cases

常见使用场景

Market Share Analysis: Pie/doughnut charts showing competitive distribution
Sales Funnels: Funnel charts for conversion tracking at each stage
Budget Allocation: Pie charts showing spending categories
Survey Results: Doughnut charts with percentage breakdowns
Population Demographics: Pyramid charts for age distribution
Process Efficiency: Funnel charts showing drop-off rates
Portfolio Distribution: Pie charts for asset allocation
Website Traffic Sources: Doughnut charts with referral data
Project Time Allocation: Pie charts for resource distribution
Customer Segmentation: Multiple pie charts for cohort analysis

市场份额分析：饼图/环形图展示竞品分布
销售漏斗：漏斗图跟踪各阶段转化率
预算分配：饼图展示支出类别
调查结果：环形图展示百分比细分
人口统计：金字塔图展示年龄分布
流程效率：漏斗图展示流失率
投资组合分布：饼图展示资产配置
网站流量来源：环形图展示推荐数据
项目时间分配：饼图展示资源分布
客户细分：多饼图展示群组分析

Tips and Best Practices

提示与最佳实践

Use smart labels when dealing with many small slices to prevent overlap
Group small values (< 5%) into "Others" category for clarity
Prefer doughnut over pie when displaying a key metric in the center
Use funnel mode 'Trapezoidal' for clearer stage comparison
Enable tooltips for detailed information without cluttering labels
Choose appropriate colors that provide sufficient contrast
Consider accessibility by providing text alternatives and keyboard navigation
Use explode effects sparingly to highlight important data points
Set enableSmartLabels to true for charts with 8+ data points
Apply themes consistently with other charts in your application

当处理多个小扇区时，使用智能标签防止重叠
将小值（<5%）分组为“其他”类别以提升清晰度
当需要在中心展示关键指标时，优先选择环形图而非饼图
为更清晰的阶段对比，使用“梯形”模式的漏斗图
启用工具提示以展示详细信息，避免标签混乱
选择对比度足够的颜色以确保可读性
考虑无障碍访问，提供文本替代方案和键盘导航
谨慎使用爆炸效果，仅用于突出重要数据点
当图表包含8个以上数据点时，设置enableSmartLabels为true
与应用中其他图表保持主题一致

syncfusion-react-accumulation-chart

Original

Translation

Implementing Syncfusion React Accumulation Charts

实现Syncfusion React Accumulation Charts

When to Use This Skill

何时使用此技能

Component Overview

组件概述

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

Pie and Doughnut Charts

饼图与环形图

Funnel and Pyramid Charts

漏斗图与金字塔图

Data Labels

数据标签

Legend Configuration

图例配置

Tooltip Customization

工具提示自定义

Data Grouping

数据分组

Annotations

注释

Customization and Styling

自定义与样式

Accessibility Features

无障碍功能

Empty Points Handling

空值处理

Appearance and Theming

外观与主题

Export and Print

导出与打印

API Reference

API参考

Quick Start Example

快速入门示例

Common Patterns

常见模式

Pattern 1: Doughnut Chart with Legend

模式1：带图例的环形图

Pattern 2: Funnel Chart with Data Labels

模式2：带数据标签的漏斗图

Pattern 3: Semi-Pie Chart (Gauge Style)

模式3：半饼图（仪表样式）

Pattern 4: Exploded Pie Chart

模式4：爆炸式饼图

API Reference

API参考

AccumulationChartComponent Properties

AccumulationChartComponent属性

Core Properties

核心属性

Feature Properties

功能属性

Interactive Properties

交互属性

Layout Properties

布局属性

Accessibility Properties

无障碍属性

AccumulationSeriesDirective Properties

AccumulationSeriesDirective属性

Methods

方法

Events

事件

Key Props Summary

关键属性汇总

Common Use Cases

常见使用场景

Tips and Best Practices

提示与最佳实践

Related Components

相关组件