syncfusion-angular-accumulation-chart

实现 Syncfusion Angular 累积图表

累积图表组件是一款强大的可视化工具，可通过饼图、圆环图、金字塔图和漏斗图展示各类别的数据分布。本技能将指导你在 Angular 应用中创建、配置和自定义累积图表。

何时使用此技能

• 创建饼图/圆环图 - 展示数据的比例分布
• 构建金字塔图/漏斗图 - 展示分层数据或逐步变化的数据
• 添加交互元素 - 实现工具提示、选择和点击事件
• 自定义外观 - 应用主题、颜色、渐变和动画
• 处理数据标签 - 配置标签位置、格式和模板
• 管理图例 - 添加并自定义图表图例
• 添加注释 - 插入标题、中心标签和自定义注释
• 确保无障碍访问 - 实现 WCAG 合规性和键盘导航
• 动态更新 - 处理实时数据更改和分组
• 导出/打印 - 导出图表为 PDF 或使用打印功能

组件概览

累积图表支持在单个组件中使用多种系列类型：

• 饼图 - 以圆形扇区表示数据比例
• 圆环图（带 innerRadius 的饼图） - 中心镂空的饼图变体（支持中心标签）
• 金字塔图 - 以金字塔形状堆叠数据
• 漏斗图 - 以漏斗形状展示数据

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 通过 ng add 命令安装
• 使用数据绑定创建基本图表
• 数组和 JSON 数据格式
• CSS 导入和主题设置
• 初始组件配置

系列类型和配置

📄 阅读： references/series-and-types.md

• 饼图、圆环图、金字塔图和漏斗图的比较
• 系列属性和选项
• 渲染多个系列
• 特定类型的功能和使用场景

数据标签和图例

📄 阅读： references/data-labels-and-legends.md

• 数据标签位置（内部、外部、自动）
• 标签格式和自定义模板
• 标签可见性和交叠处理
• 图例位置和自定义
• 图例点击事件和交互

注释和标题

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

• 图表标题和副标题
• 圆环图的中心标签
• 文本和图像注释
• 注释位置和对齐方式

外观和样式

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

• 调色板和主题选择
• 动画配置和时间设置
• 渐变和纯色填充
• 自定义 CSS 样式
• 打印和导出功能

交互功能

📄 阅读： references/interactive-features.md

• 工具提示配置和自定义
• 选择模式（单选、多选、无）
• 数据点和系列选择事件
• 点击和悬停事件处理程序
• 选择样式

无障碍访问和响应式设计

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

• WCAG 合规要求
• 键盘导航模式
• ARIA 属性和标签
• 屏幕阅读器支持
• 响应式图表尺寸
• 移动设备和触控支持

高级场景

📄 阅读： references/advanced-scenarios.md

• 动态数据更新和刷新
• 数据分组和筛选
• 空数据点处理
• 常见模式和工作流
• EJ1 到 EJ2 迁移指南

快速入门示例

基本饼图

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AccumulationChartModule],
  providers: [PieSeriesService, AccumulationTooltipService],
  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 }
  ];
}

带中心标签的基本圆环图（带 innerRadius 的饼图）

<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>


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

常见模式

模式 1：动态数据更新

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
}

模式 2：处理选择事件

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

模式 3：自定义颜色调色板

两种与严格模板兼容的方案——选择适合你数据模型的方案：

方案 A — 在系列上使用 [palettes]（颜色数组，循环应用）：

@Component({
  template: `
    <ejs-accumulationchart>
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="data"
          xName="x"
          yName="y"
          [palettes]="palette">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class ChartComponent {
  data = [
    { x: 'A', y: 30 },
    { x: 'B', y: 25 },
    { x: 'C', y: 20 },
    { x: 'D', y: 15 }
  ];
  palette = ['#E94649', '#F6B53F', '#6FAAB0', '#FF33F3'];
}

方案 B — 在系列上使用 pointColorMapping（将颜色嵌入每个数据点）：

@Component({
  template: `
    <ejs-accumulationchart>
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="data"
          xName="x"
          yName="y"
          pointColorMapping="fill">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class ChartComponent {
  data = [
    { x: 'A', y: 30, fill: '#FF6B6B' },
    { x: 'B', y: 25, fill: '#4ECDC4' },
    { x: 'C', y: 20, fill: '#45B7D1' },
    { x: 'D', y: 15, fill: '#FFA07A' }
  ];
}

⚠️ 请勿在 <ejs-accumulationchart> 上使用 [palette]（单数）——它不是一个带类型的 @Input()，在 Angular 严格模式下会导致 NG8002。以上两种方案都用于 <e-accumulation-series>，完全兼容严格模式。

### Pattern 4: Legend with Position

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

关键配置属性

属性	类型	用途
type	string	图表类型：'Pie'、'Doughnut'、'Pyramid'、'Funnel'
dataSource	object[]	包含 x 和 y 值的数据点数组
xName	string	类别数据的字段名
yName	string	数值数据的字段名
dataLabel	object	标签配置（位置、格式）
tooltip	object	工具提示设置（启用、模板、格式）
palettes	string[]	系列属性——循环应用于数据点的十六进制或命名颜色数组。在 <e-accumulation-series> 上使用 [palettes]="palette"。✅ 兼容严格模式。
pointColorMapping	string	系列属性——每个数据对象中存放数据点颜色的字段名（例如 "fill"）。在 <e-accumulation-series> 上使用 pointColorMapping="fill"。✅ 兼容严格模式。
animation	object	动画配置（启用、持续时间）
startAngle	number	饼图/圆环图的起始角度（0-360）
explode	boolean	启用数据点分离效果

故障排除

❌ NG8002：无法绑定到 'palette'，因为它不是 'ejs-accumulationchart' 的已知属性

原因： [palette] 不是 Syncfusion Angular 封装中 AccumulationChartComponent 的带类型 @Input()。Angular 的严格模板检查器（"strictTemplates": true） 会报出 NG8002，导致构建失败。

错误示例——会导致 NG8002：

<ejs-accumulationchart [palette]="chartPalette">
  <e-accumulation-series [dataSource]="data" xName="x" yName="y">
  </e-accumulation-series>
</ejs-accumulationchart>

正确示例——方案 A：在系列上使用 [palettes]（颜色数组）：

<ejs-accumulationchart>
  <e-accumulation-series-collection>
    <e-accumulation-series
      [dataSource]="data"
      xName="x"
      yName="y"
      [palettes]="palette">
    </e-accumulation-series>
  </e-accumulation-series-collection>
</ejs-accumulationchart>

palette = ['#E94649', '#F6B53F', '#6FAAB0', '#FF33F3', '#228B22', '#3399FF'];
// data points need no fill field — palette colors apply cyclically

正确示例——方案 B：在系列上使用 pointColorMapping（为每个数据点指定颜色）：

<ejs-accumulationchart>
  <e-accumulation-series-collection>
    <e-accumulation-series
      [dataSource]="data"
      xName="x"
      yName="y"
      pointColorMapping="fill">
    </e-accumulation-series>
  </e-accumulation-series-collection>
</ejs-accumulationchart>

data = [
  { x: 'Electronics', y: 108310, fill: '#0ea5e9' },
  { x: 'Clothing',    y: 68280,  fill: '#6366f1' },
  { x: 'Grocery',     y: 51210,  fill: '#10b981' },
  { x: 'Furniture',   y: 34140,  fill: '#f59e0b' },
  { x: 'Others',      y: 22760,  fill: '#94a3b8' }
];

关键规则： [palettes] 和 pointColorMapping 都应设置在 <e-accumulation-series> 上，而不是图表元素上。

---

❌ NG8002：其他未知属性错误

如果 <ejs-accumulationchart> 的任何绑定出现类似的 NG8002 错误，请检查：

1. AccumulationChartModule 是否列在组件的 imports: [...] 中
2. 属性名是否与带类型的 @Input() 完全匹配（驼峰式）
3. 服务（PieSeriesService 等）是否列在 providers: [...] 中

---

后续步骤

1. 从这里开始： 通过 references/getting-started.md 设置你的第一个图表
2. 选择图表类型： 参阅 references/series-and-types.md，了解详细的类型信息
3. 自定义： 根据具体需求使用其他参考文档（标签、图例、交互性、样式）
4. 增强： 参阅 references/accessibility-and-responsive.md，了解适用于生产环境的实现

API 参考文档

完整 API 目录

完整 API 指南： references/api-reference.md

所有 API 文档均可在 https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/ 查阅

API 快速链接

核心组件：

• AccumulationChart - 主图表组件
• AccumulationSeries - 系列配置
• AccumulationDataLabelSettings - 数据标签设置
• LegendSettings - 图例配置
• TooltipSettings - 工具提示设置

关键枚举：

• AccumulationType - 饼图、圆环图、金字塔图、漏斗图
• AccumulationLabelPosition - 内部、外部
• LegendPosition - 顶部、底部、左侧、右侧

事件接口：

• IAccLoadedEventArgs - 加载事件
• IAccPointRenderEventArgs - 数据点渲染事件
• IAccLegendClickEventArgs - 图例点击事件

每份参考指南末尾都包含“API 参考摘要”部分，其中提供相关 API 链接。

相关技能

• 实现折线图／柱状图（用于其他图表类型）
• 使用 Angular 数据绑定
• Angular 组件样式与主题