Back to Details

syncfusion-angular-accumulation-chart

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Accumulation Chart

实现Syncfusion Angular累积图表

The Accumulation Chart component is a powerful visualization tool for displaying data distribution across categories using pie charts, doughnut charts, pyramids, and funnels. This skill guides you through creating, configuring, and customizing accumulation charts in Angular applications.
累积图表组件是一个强大的可视化工具，可使用饼图、环形图、金字塔图和漏斗图展示各类别间的数据分布情况。本技能将指导你在Angular应用中创建、配置和自定义累积图表。

When to Use This Skill

何时使用本技能

  • Creating pie/doughnut charts - Display proportional data distribution
  • Building pyramid/funnel charts - Show hierarchical or step-wise data
  • Adding interactive elements - Implement tooltips, selection, and click events
  • Customizing appearance - Apply themes, colors, gradients, and animations
  • Handling data labels - Configure label positioning, formatting, and templates
  • Managing legends - Add and customize chart legends
  • Adding annotations - Insert titles, center labels, and custom annotations
  • Ensuring accessibility - Implement WCAG compliance and keyboard navigation
  • Dynamic updates - Handle real-time data changes and grouping
  • Export/Print - Export charts to PDF or print functionality
  • 创建饼图/环形图 - 展示比例数据分布
  • 构建金字塔图/漏斗图 - 展示层级或分步数据
  • 添加交互元素 - 实现提示框、选择和点击事件
  • 自定义外观 - 应用主题、颜色、渐变和动画效果
  • 处理数据标签 - 配置标签位置、格式和模板
  • 管理图例 - 添加并自定义图表图例
  • 添加注释 - 插入标题、中心标签和自定义注释
  • 确保可访问性 - 实现WCAG合规性和键盘导航
  • 动态更新 - 处理实时数据变更和分组
  • 导出/打印 - 导出图表为PDF或添加打印功能

Component Overview

组件概述

The Accumulation Chart supports multiple series types within a single component:
  • Pie Chart - Circular slices representing data proportions
  • Donut (Pie with innerRadius) Chart - Pie chart variant with hollow center (supports center label)
  • Pyramid Chart - Data stacked in pyramid shape
  • Funnel Chart - Data visualization in funnel shape
累积图表组件支持在单个组件中使用多种系列类型：
  • 饼图 - 圆形切片代表数据比例
  • 环形图（带innerRadius的饼图） - 饼图的变体，中心为空心（支持中心标签）
  • 金字塔图 - 数据以金字塔形状堆叠
  • 漏斗图 - 以漏斗形状展示数据

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md
  • Installation via ng add command
  • Basic chart creation with data binding
  • Array and JSON data formats
  • CSS imports and theme setup
  • Initial component configuration
📄 阅读： references/getting-started.md
  • 通过ng add命令安装
  • 带数据绑定的基础图表创建
  • 数组和JSON数据格式
  • CSS导入和主题设置
  • 初始组件配置

Series Types and Configuration

系列类型与配置

📄 Read: references/series-and-types.md
  • Pie vs Doughnut vs Pyramid vs Funnel
  • Series properties and options
  • Multiple series rendering
  • Type-specific features and use cases
📄 阅读： references/series-and-types.md
  • 饼图 vs 环形图 vs 金字塔图 vs 漏斗图
  • 系列属性与选项
  • 多系列渲染
  • 特定类型的功能与使用场景

Data Labels and Legends

数据标签与图例

📄 Read: references/data-labels-and-legends.md
  • Data label positioning (inside, outside, auto)
  • Label formatting and custom templates
  • Label visibility and intersection handling
  • Legend placement and customization
  • Legend click events and interactions
📄 阅读： references/data-labels-and-legends.md
  • 数据标签位置（内部、外部、自动）
  • 标签格式与自定义模板
  • 标签可见性与重叠处理
  • 图例位置与自定义
  • 图例点击事件与交互

Annotations and Titles

注释与标题

📄 Read: references/annotations-and-titles.md
  • Chart titles and subtitles
  • Center labels for doughnut charts
  • Text and image annotations
  • Annotation positioning and alignment
📄 阅读： references/annotations-and-titles.md
  • 图表标题与副标题
  • 环形图的中心标签
  • 文本和图片注释
  • 注释位置与对齐方式

Appearance and Styling

外观与样式

📄 Read: references/appearance-and-styling.md
  • Color palettes and theme selection
  • Animation configuration and timing
  • Gradient and solid fills
  • Custom CSS styling
  • Print and export functionality
📄 阅读： references/appearance-and-styling.md
  • 调色板与主题选择
  • 动画配置与时长
  • 渐变与纯色填充
  • 自定义CSS样式
  • 打印与导出功能

Interactive Features

交互功能

📄 Read: references/interactive-features.md
  • Tooltip configuration and customization
  • Selection modes (single, multiple, none)
  • Point and series selection events
  • Click and hover event handlers
  • Selection styling
📄 阅读： references/interactive-features.md
  • 提示框配置与自定义
  • 选择模式（单选、多选、无）
  • 数据点和系列选择事件
  • 点击与悬停事件处理程序
  • 选择样式

Accessibility and Responsive Design

可访问性与响应式设计

📄 Read: references/accessibility-and-responsive.md
  • WCAG compliance requirements
  • Keyboard navigation patterns
  • ARIA attributes and labels
  • Screen reader support
  • Responsive chart sizing
  • Mobile and touch support
📄 阅读： references/accessibility-and-responsive.md
  • WCAG合规性要求
  • 键盘导航模式
  • ARIA属性与标签
  • 屏幕阅读器支持
  • 响应式图表尺寸
  • 移动端与触摸支持

Advanced Scenarios

高级场景

📄 Read: references/advanced-scenarios.md
  • Dynamic data updates and refresh
  • Data grouping and filtering
  • Empty point handling
  • Common patterns and workflows
  • EJ1 to EJ2 migration guide
📄 阅读： references/advanced-scenarios.md
  • 动态数据更新与刷新
  • 数据分组与筛选
  • 空值点处理
  • 常见模式与工作流
  • EJ1到EJ2迁移指南

Quick Start Example

快速入门示例

Basic Pie Chart

基础饼图

typescript
import { Component } from '@angular/core';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AccumulationChartModule],
  template: `
    <ejs-accumulationchart id="container" [tooltip]="{ enable: true }">
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="data"
          xName="x"
          yName="y"
          type="Pie">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `,
  styles: [`#container { height: 420px; width: 100%; }`]
})
export class AppComponent {
  data = [
    { x: 'Chrome', y: 37 },
    { x: 'Firefox', y: 28 },
    { x: 'Safari', y: 18 },
    { x: 'Others', y: 17 }
  ];
}
typescript
import { Component } from '@angular/core';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AccumulationChartModule],
  template: `
    <ejs-accumulationchart id="container" [tooltip]="{ enable: true }">
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="data"
          xName="x"
          yName="y"
          type="Pie">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `,
  styles: [`#container { height: 420px; width: 100%; }`]
})
export class AppComponent {
  data = [
    { x: 'Chrome', y: 37 },
    { x: 'Firefox', y: 28 },
    { x: 'Safari', y: 18 },
    { x: 'Others', y: 17 }
  ];
}

Basic Donut (Pie with innerRadius) Chart with Center Label

带中心标签的基础环形图（带innerRadius的饼图）

typescript
<ejs-accumulationchart id="container">
  <e-accumulation-series-collection>
    <e-accumulation-series
      [dataSource]="data"
      xName="x"
      yName="y"
      type="Pie" innerRadius="40%"
      [dataLabel]="{ visible: true, position: 'Inside', name: 'text' }">
    </e-accumulation-series>
  </e-accumulation-series-collection>
</ejs-accumulationchart>

<!-- Center label in template -->
<div style="font-size: 18px; text-align: center;">
  Total Sales: $45,000
</div>
typescript
<ejs-accumulationchart id="container">
  <e-accumulation-series-collection>
    <e-accumulation-series
      [dataSource]="data"
      xName="x"
      yName="y"
      type="Pie" innerRadius="40%"
      [dataLabel]="{ visible: true, position: 'Inside', name: 'text' }">
    </e-accumulation-series>
  </e-accumulation-series-collection>
</ejs-accumulationchart>

<!-- Center label in template -->
<div style="font-size: 18px; text-align: center;">
  Total Sales: $45,000
</div>

Common Patterns

常见模式

Pattern 1: Dynamic Data Update

模式1：动态数据更新

typescript
updateData() {
  this.data = [
    { x: 'Q1', y: 25000 },
    { x: 'Q2', y: 35000 },
    { x: 'Q3', y: 42000 },
    { x: 'Q4', y: 50000 }
  ];
  // Chart automatically refreshes with new data
}
typescript
updateData() {
  this.data = [
    { x: 'Q1', y: 25000 },
    { x: 'Q2', y: 35000 },
    { x: 'Q3', y: 42000 },
    { x: 'Q4', y: 50000 }
  ];
  // Chart automatically refreshes with new data
}

Pattern 2: Handling Selection Events

模式2：处理选择事件

typescript
onPointSelected(args: any) {
  console.log('Selected point:', args.pointIndex);
  console.log('Selected value:', args.series.dataSource[args.pointIndex].y);
}
typescript
onPointSelected(args: any) {
  console.log('Selected point:', args.pointIndex);
  console.log('Selected value:', args.series.dataSource[args.pointIndex].y);
}

Pattern 3: Custom Color Palette

模式3：自定义调色板

typescript
@Component({
  template: `
    <ejs-accumulationchart 
      [palette]="customPalette">
      ...
    </ejs-accumulationchart>
  `
})
export class ChartComponent {
  customPalette = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A'];
}
typescript
@Component({
  template: `
    <ejs-accumulationchart 
      [palette]="customPalette">
      ...
    </ejs-accumulationchart>
  `
})
export class ChartComponent {
  customPalette = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A'];
}

Pattern 4: Legend with Position

模式4：指定位置的图例

typescript
<ejs-accumulationchart>
  <e-accumulation-legend
    [visible]="true"
    position="Right"
    [enableHighlight]="true">
  </e-accumulation-legend>
</ejs-accumulationchart>
typescript
<ejs-accumulationchart>
  <e-accumulation-legend
    [visible]="true"
    position="Right"
    [enableHighlight]="true">
  </e-accumulation-legend>
</ejs-accumulationchart>

Key Configuration Props

关键配置属性

PropertyTypePurpose
type
stringChart type: 'Pie', 'Doughnut', 'Pyramid', 'Funnel'
dataSource
object[]Array of data points with x and y values
xName
stringField name for category data
yName
stringField name for value data
dataLabel
objectLabel configuration (position, formatting)
tooltip
objectTooltip settings (enable, template, formatting)
palette
string[]Custom color array for series points
animation
objectAnimation configuration (enable, duration)
startAngle
numberStarting angle for pie/doughnut (0-360)
explode
booleanEnable point separation effect
属性类型用途
type
string图表类型：'Pie'、'Doughnut'、'Pyramid'、'Funnel'
dataSource
object[]包含x和y值的数据点数组
xName
string分类数据的字段名
yName
string值数据的字段名
dataLabel
object标签配置（位置、格式）
tooltip
object提示框设置（启用、模板、格式）
palette
string[]系列数据点的自定义颜色数组
animation
object动画配置（启用、时长）
startAngle
number饼图/环形图的起始角度（0-360）
explode
boolean启用数据点分离效果

Next Steps

后续步骤

  1. Start with: references/getting-started.md to set up your first chart
  2. Choose chart type: references/series-and-types.md for detailed type information
  3. Customize: Use other references based on your specific needs (labels, legends, interactivity, styling)
  4. Enhance: Refer to references/accessibility-and-responsive.md for production-ready implementations
  1. 入门： 参考references/getting-started.md创建你的第一个图表
  2. 选择图表类型： 参考references/series-and-types.md获取详细的类型信息
  3. 自定义： 根据你的具体需求（标签、图例、交互性、样式）参考其他文档
  4. 优化： 参考references/accessibility-and-responsive.md实现生产级别的图表

API Reference Documentation

API参考文档

Comprehensive API Catalog

完整API目录

Complete API Guide: references/api-reference.md
All API documentation is available at https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/
完整API指南： references/api-reference.md
所有API文档均可访问 https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/

Quick API Links

快速API链接

Core Components:
Key Enumerations:
Event Interfaces:
Each reference guide includes an "API Reference Summary" section at the end with relevant API links.
核心组件：
关键枚举：
事件接口：
每个参考指南末尾都包含"API参考摘要"部分，提供相关API链接。

Related Skills

相关技能

  • Implementing line/bar charts (for other chart types)
  • Working with Angular data binding
  • Angular component styling and theming
  • 实现折线图/柱状图（适用于其他图表类型）
  • Angular数据绑定实践
  • Angular组件样式与主题设置