syncfusion-javascript-accumulation-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Accumulation Charts in Syncfusion TypeScript & JavaScript

在Syncfusion TypeScript & JavaScript中实现累积图表

The Syncfusion Accumulation Chart component provides powerful visualization tools for creating interactive pie charts, doughnut charts, funnel charts, and pyramid charts. With advanced customization options, interactive features, multiple chart types, and comprehensive data handling capabilities, you can create professional percentage-based and categorical visualizations for any use case. Works in both TypeScript (with full type safety) and JavaScript (ES5 CDN-based or webpack).

Syncfusion 累积图表组件提供了功能强大的可视化工具，可用于创建交互式饼图、环形图、漏斗图和金字塔图。凭借高级自定义选项、交互特性、多图表类型支持和全面的数据处理能力，你可以为任意场景打造专业的百分比类、分类类可视化效果。同时支持TypeScript（完整类型安全）和JavaScript（基于ES5 CDN或webpack）两种使用方式。

Platform Support

平台支持

This skill covers both TypeScript and JavaScript implementations:

TypeScript (Primary):

Full type definitions and IDE support
Module-based imports with
```
AccumulationChart.Inject()
```
Webpack/bundler-based setup
Advanced type checking

JavaScript (ES5):

CDN-based or local script loading
Global namespace access (
```
ej.charts.AccumulationChart
```
)
No build step required
Compatible with ES5 and modern browsers

Where noted, code examples show both TS and JS variants. Choose based on your project setup.

本教程覆盖TypeScript和JavaScript两种实现方式：

TypeScript（主推）：

完整的类型定义和IDE支持
基于模块导入，使用
```
AccumulationChart.Inject()
```
基于Webpack/打包工具的项目配置
高级类型检查

JavaScript（ES5）：

基于CDN或本地脚本加载
全局命名空间访问（
```
ej.charts.AccumulationChart
```
）
无需构建步骤
兼容ES5及现代浏览器

标注说明处的代码示例会同时提供TS和JS两种版本，你可以根据项目配置自行选择。

When to Use This Skill

何时使用本教程

Use this skill when you need to:

Create pie charts - Basic pie chart with data points and series
Build doughnut charts - Pie chart with inner radius (donut hole)
Implement funnel charts - Funnel-shaped data visualization
Design pyramid charts - Pyramid-shaped hierarchical visualization
Configure chart types - Switch between Pie, Doughnut, Funnel, Pyramid
Customize legends - Position, align, and style legend elements
Add data labels - Configure label positioning and content
Enable tooltips - Interactive hover information
Implement selection - Point and series selection modes
Add annotations - Custom annotations and markers
Apply styling - Colors, gradients, themes, and responsive design
Ensure accessibility - WCAG compliance, keyboard navigation, screen reader support
Export charts - PNG, SVG, PDF, or print functionality
Handle dynamic data - Real-time data updates and animations

当你需要完成以下需求时可以使用本教程：

创建饼图 - 带数据点和系列的基础饼图
搭建环形图 - 带内半径（环形中空区域）的饼图
实现漏斗图 - 漏斗形状的数据可视化
设计金字塔图 - 金字塔形状的层级可视化
配置图表类型 - 在饼图、环形图、漏斗图、金字塔图之间切换
自定义图例 - 设置图例元素的位置、对齐方式和样式
添加数据标签 - 配置标签的位置和展示内容
启用提示框 - 交互式悬停信息展示
实现选择功能 - 点选和系列选择模式
添加注解 - 自定义注解和标记
应用样式 - 颜色、渐变、主题和响应式设计
保障可访问性 - 符合WCAG标准、支持键盘导航、屏幕阅读器适配
导出图表 - PNG、SVG、PDF导出或打印功能
处理动态数据 - 实时数据更新和动画效果

Accumulation Chart Overview

累积图表概述

Accumulation charts visualize data as proportions of a whole, ideal for:

Pie Charts - Show percentage distribution of categories
Doughnut Charts - Pie variant with center label capability
Funnel Charts - Funnel-shaped representations (stages, conversion funnels)
Pyramid Charts - Pyramid-shaped hierarchical data visualization

All types support interactive features, custom styling, multiple series, and rich configuration options.

累积图表将数据展示为整体的占比部分，非常适合以下场景：

饼图 - 展示分类的百分比分布
环形图 - 支持中心标签的饼图变体
漏斗图 - 漏斗形状的展示（流程阶段、转化漏斗）
金字塔图 - 金字塔形状的层级数据可视化

所有类型都支持交互特性、自定义样式、多系列和丰富的配置选项。

Navigation Guide

导航指南

Choose the reference that matches your task:

选择匹配你需求的参考文档：

Getting Started

入门指南

📄 Read: references/getting-started.md

Installation and setup for TypeScript and JavaScript
Dependencies and package configuration
Creating your first accumulation chart
Basic pie chart implementation
Module injection and initialization patterns

📄 阅读： references/getting-started.md

TypeScript和JavaScript的安装与配置
依赖和包配置
创建你的第一个累积图表
基础饼图实现
模块注入和初始化模式

Chart Types & Selection

图表类型与选择

📄 Read: references/chart-types.md

Pie chart fundamentals and implementation
Doughnut charts with inner radius and center labels
Funnel charts and data arrangement
Pyramid charts and reverse mode
Radius and size customization for each type
Comparison matrix: when to use each type

📄 阅读： references/chart-types.md

饼图基础与实现
带内半径和中心标签的环形图
漏斗图和数据排列
金字塔图和反转模式
各类型的半径和尺寸自定义
对比矩阵：各类型适用场景

Legend Configuration

图例配置

📄 Read: references/legend-configuration.md

Legend positioning (left, right, top, bottom)
Alignment options (center, near, far)
Legend styling and customization
Visibility and interactive legend features
Responsive legend behavior

📄 阅读： references/legend-configuration.md

图例位置（左、右、上、下）
对齐选项（居中、近边、远边）
图例样式与自定义
可见性和交互式图例特性
响应式图例行为

Data Labels

数据标签

📄 Read: references/data-labels.md

Enabling and configuring data labels
Label positioning (inside, outside)
Smart label arrangement and overlap prevention
Label formatting and templates
Dynamic label visibility

📄 阅读： references/data-labels.md

启用和配置数据标签
标签位置（内部、外部）
智能标签排列和防重叠
标签格式化和模板
动态标签可见性

Tooltips & Selection

提示框与选择

📄 Read: references/tooltips-and-selection.md

Tooltip configuration and styling
Custom tooltip templates
Point selection modes (Single, Multiple, None)
Series selection capabilities
Event handling for interactions

📄 阅读： references/tooltips-and-selection.md

提示框配置与样式
自定义提示框模板
点选模式（单选、多选、关闭）
系列选择能力
交互事件处理

Annotations & Features

注解与特性

📄 Read: references/annotations-and-features.md

Adding annotations to charts
Gradient fills and custom colors
Center labels for doughnut charts
Grouping and clubbing data points
Empty point handling and visibility

📄 阅读： references/annotations-and-features.md

为图表添加注解
渐变填充和自定义颜色
环形图的中心标签
数据点分组合并
空值处理和可见性设置

Customization & Styling

自定义与样式

📄 Read: references/customization-and-styling.md

CSS class customization and styling
Theme options (Material, Bootstrap, Fabric, etc.)
Responsive sizing and dimensions
Print and export functionality
Title and subtitle configuration

📄 阅读： references/customization-and-styling.md

CSS类自定义和样式设置
主题选项（Material、Bootstrap、Fabric等）
响应式尺寸和宽高设置
打印和导出功能
标题和副标题配置

Accessibility & Advanced Features

可访问性与高级特性

📄 Read: references/accessibility-and-advanced.md

WCAG compliance and accessibility standards
Keyboard navigation and focus management
Screen reader support and ARIA attributes
Dynamic data updates and animations
Real-time chart updates
Performance optimization for large datasets
Troubleshooting common issues

📄 阅读： references/accessibility-and-advanced.md

WCAG合规与可访问性标准
键盘导航和焦点管理
屏幕阅读器支持和ARIA属性
动态数据更新和动画
图表实时更新
大数据集的性能优化
常见问题排查

API Reference

API参考

📄 Read: references/api-reference.md

Complete AccumulationChart API reference
All properties, methods, and events
Interface and model definitions
Module injection and enums
Comprehensive API tables with links to official documentation

📄 阅读： references/api-reference.md

完整的AccumulationChart API参考
所有属性、方法和事件
接口和模型定义
模块注入和枚举
附带官方文档链接的完整API表格

Quick Start Example

快速开始示例

TypeScript:

typescript

import { AccumulationChart, AccumulationDataLabel, AccumulationLegend, AccumulationTooltip } from '@syncfusion/ej2-charts';

// Inject required modules
AccumulationChart.Inject( AccumulationDataLabel, AccumulationLegend, AccumulationTooltip);

const data = [
  { x: 'Jan', y: 18, text: 'January' },
  { x: 'Feb', y: 18, text: 'February' },
  { x: 'Mar', y: 18, text: 'March' },
  { x: 'Apr', y: 20, text: 'April' }
];

const chart = new AccumulationChart({
  series: [{
    dataSource: data,
    xName: 'x',
    yName: 'y',
    type: 'Pie'
  }],
  tooltip: { enable: true },
  legendSettings: { visible: true }
}, '#chart');

TypeScript:

typescript

import { AccumulationChart, AccumulationDataLabel, AccumulationLegend, AccumulationTooltip } from '@syncfusion/ej2-charts';

// Inject required modules
AccumulationChart.Inject( AccumulationDataLabel, AccumulationLegend, AccumulationTooltip);

const data = [
  { x: 'Jan', y: 18, text: 'January' },
  { x: 'Feb', y: 18, text: 'February' },
  { x: 'Mar', y: 18, text: 'March' },
  { x: 'Apr', y: 20, text: 'April' }
];

const chart = new AccumulationChart({
  series: [{
    dataSource: data,
    xName: 'x',
    yName: 'y',
    type: 'Pie'
  }],
  tooltip: { enable: true },
  legendSettings: { visible: true }
}, '#chart');

Common Patterns

常用模式

Pattern 1: Basic Pie Chart with Legend

模式1：带图例的基础饼图

Standard pie chart showing data distribution with legend for category identification:

typescript

const chart = new AccumulationChart({
  series: [{
    dataSource: data,
    xName: 'x',
    yName: 'y',
    type: 'Pie' // `type` is optional for `Pie` since it is default
  }],
  legendSettings: { visible: true, position: 'Right' }
}, '#chart');

标准饼图，展示数据分布，附带图例用于分类识别：

typescript

const chart = new AccumulationChart({
  series: [{
    dataSource: data,
    xName: 'x',
    yName: 'y',
    type: 'Pie' // `type` is optional for `Pie` since it is default
  }],
  legendSettings: { visible: true, position: 'Right' }
}, '#chart');

Pattern 2: Doughnut Chart with Center Label

模式2：带中心标签的环形图

Doughnut chart with center text for additional information:

typescript

const chart = new AccumulationChart({
  series: [{
    dataSource: data,
    xName: 'x',
    yName: 'y',
    innerRadius: '40%'    // no explicit type for doughnut chart, innerRadius itself renders doughnut.
  }],
  centerLabel: { text: 'Sales', hoverTextFormat: '${point.x}: ${point.y}%' }
}, '#chart');

附带中心文本展示额外信息的环形图：

typescript

const chart = new AccumulationChart({
  series: [{
    dataSource: data,
    xName: 'x',
    yName: 'y',
    innerRadius: '40%'    // no explicit type for doughnut chart, innerRadius itself renders doughnut.
  }],
  centerLabel: { text: 'Sales', hoverTextFormat: '${point.x}: ${point.y}%' }
}, '#chart');

Pattern 3: Funnel Chart with Custom Colors

模式3：自定义颜色的漏斗图

Funnel visualization showing progression through stages:

Note Import and Inject

FunnelSeries

typescript

const chart = new AccumulationChart({
  series: [{
    dataSource: stageData,
    xName: 'stage',
    yName: 'users',
    type: 'Funnel',
    neckWidth: '15%'
  }]
}, '#chart');

展示流程阶段进度的漏斗可视化：

注意导入并注入

FunnelSeries

。

typescript

const chart = new AccumulationChart({
  series: [{
    dataSource: stageData,
    xName: 'stage',
    yName: 'users',
    type: 'Funnel',
    neckWidth: '15%'
  }]
}, '#chart');

Pattern 4: Pyramid Chart Reversed

模式4：反转的金字塔图

Pyramid visualization:

Note Import and Inject

PyramidSeries

typescript

const chart = new AccumulationChart({
  series: [{
    dataSource: data,
    xName: 'x',
    yName: 'y',
    type: 'Pyramid',
    pyramidMode: 'Linear',
  }]
}, '#chart');

金字塔可视化：

注意导入并注入

PyramidSeries

。

typescript

const chart = new AccumulationChart({
  series: [{
    dataSource: data,
    xName: 'x',
    yName: 'y',
    type: 'Pyramid',
    pyramidMode: 'Linear',
  }]
}, '#chart');

Pattern 5: Interactive Selection with Tooltip

模式5：带提示框的交互式选择

Point selection with detailed tooltips:

Note Import and Inject

AccumulationTooltip

and

AccumulationSelection

typescript

const chart = new AccumulationChart({
  series: [{
    dataSource: data,
    xName: 'x',
    yName: 'y',
    type: 'Pie',
    dataLabel: { 
      visible: true,
      position: 'Outside',
      name: 'text'
    }
  }],
  selectionMode: 'Point',
  tooltip: { 
    enable: true,
    format: '${point.x}: <b>${point.y}%</b>'
  }
}, '#chart');

点选功能搭配详情提示框：

注意导入并注入

AccumulationTooltip

和

AccumulationSelection

。

typescript

const chart = new AccumulationChart({
  series: [{
    dataSource: data,
    xName: 'x',
    yName: 'y',
    type: 'Pie',
    dataLabel: { 
      visible: true,
      position: 'Outside',
      name: 'text'
    }
  }],
  selectionMode: 'Point',
  tooltip: { 
    enable: true,
    format: '${point.x}: <b>${point.y}%</b>'
  }
}, '#chart');

Key Properties

核心属性

For detailed information on all properties, methods, and events, see API Reference.

Chart-level:

```
series
```
- Array of series configurations | API
```
height
```
,
```
width
```
- Chart dimensions | API
```
title
```
- Chart title text | API
```
tooltip
```
- Tooltip configuration | API
```
legendSettings
```
- Legend positioning and styling | API
```
background
```
- Chart background color/image | API
```
centerLabel
```
- Center label for doughnut (TS & JS) | API

Series-level:

```
dataSource
```
- Array of data points | API
```
xName
```
,
```
yName
```
- Data field mapping | API
```
type
```
- Chart type: 'Pie', 'Doughnut', 'Funnel', 'Pyramid'
```
radius
```
- Chart radius (percentage or pixel)
```
innerRadius
```
- Inner radius for doughnut charts
```
neckWidth
```
- Funnel neck width
```
gapRatio
```
- Space between pyramid segments
```
explode
```
- Point explosion (separation)
```
dataLabel
```
- Data label configuration | API
```
marker
```
- Point marker styling

Interaction:

```
selectionMode
```
- 'Point', 'Series', or 'None' | API
```
selectionPattern
```
- Chessboard, Dots, DiagonalForward, etc. | API
```
highlightPattern
```
- Highlight pattern on hover | API
```
highlightMode
```
- 'Point', 'Series', or 'None' | API

Styling:

```
palette
```
- Color scheme array
```
theme
```
- Material, Bootstrap, Fabric, HighContrast, Fluent | API
```
enableSmartLabels
```
- Smart label positioning | API
```
enableAnimation
```
- Animation on load | API
```
animationDuration
```
- Animation duration in milliseconds

Accessibility:

```
accessibility
```
- Accessibility configuration object | API
```
tabIndex
```
- Tab index for keyboard navigation
```
ariaLabel
```
- ARIA label for screen readers

如需了解所有属性、方法和事件的详细信息，请查看API参考。

图表层级：

```
series
```
- 系列配置数组 | API
```
height
```
,
```
width
```
- 图表尺寸 | API
```
title
```
- 图表标题文本 | API
```
tooltip
```
- 提示框配置 | API
```
legendSettings
```
- 图例位置和样式 | API
```
background
```
- 图表背景色/背景图 | API
```
centerLabel
```
- 环形图的中心标签（TS & JS） | API

系列层级：

```
dataSource
```
- 数据点数组 | API
```
xName
```
,
```
yName
```
- 数据字段映射 | API
```
type
```
- 图表类型: 'Pie', 'Doughnut', 'Funnel', 'Pyramid'
```
radius
```
- 图表半径（百分比或像素）
```
innerRadius
```
- 环形图的内半径
```
neckWidth
```
- 漏斗颈部宽度
```
gapRatio
```
- 金字塔分段之间的间距
```
explode
```
- 数据点爆炸（分离）效果
```
dataLabel
```
- 数据标签配置 | API
```
marker
```
- 数据点标记样式

交互相关：

```
selectionMode
```
- 'Point', 'Series', 或 'None' | API
```
selectionPattern
```
- 棋盘、圆点、正斜线等 | API
```
highlightPattern
```
- 悬停时的高亮模式 | API
```
highlightMode
```
- 'Point', 'Series', 或 'None' | API

样式相关：

```
palette
```
- 配色方案数组
```
theme
```
- Material, Bootstrap, Fabric, HighContrast, Fluent | API
```
enableSmartLabels
```
- 智能标签定位 | API
```
enableAnimation
```
- 加载时的动画效果 | API
```
animationDuration
```
- 动画时长（毫秒）

可访问性相关：

```
accessibility
```
- 可访问性配置对象 | API
```
tabIndex
```
- 键盘导航的Tab索引
```
ariaLabel
```
- 屏幕阅读器使用的ARIA标签