syncfusion-angular-accumulation-chart

用途

本技能用于在 Angular 应用中实现和定制 Syncfusion Accumulation Chart（累积图表）组件。该组件适合展示数据在各类别之间的分布比例，支持饼图、圆环图、金字塔图和漏斗图四种图表类型。技能以参考文档导航的形式组织，引导开发者按需查阅对应主题。

主要能力

组件在单一组件内支持多种系列类型：

饼图（Pie）：用圆形扇区表示数据比例。
圆环图（Donut，即设置 innerRadius 的饼图）：带空心中心的饼图变体，支持中心标签。
金字塔图（Pyramid）：以金字塔形状堆叠数据。
漏斗图（Funnel）：以漏斗形状展示数据。

技能覆盖的功能主题包括：

数据绑定：支持数组与 JSON 数据格式，通过 xName、yName 指定类别与数值字段。
数据标签：标签定位（内部、外部、自动）、格式化与自定义模板、可见性与重叠处理。
图例：位置放置与自定义、图例点击事件与交互。
注释与标题：图表标题与副标题、圆环图中心标签、文本与图片注释及其定位对齐。
外观与样式：调色板与主题选择、动画配置与时长、渐变与纯色填充、自定义 CSS、打印与导出。
交互功能：提示框配置与自定义、选择模式（单选、多选、无）、数据点与系列选择事件、点击与悬停事件处理、选中样式。
无障碍与响应式：WCAG 合规要求、键盘导航、ARIA 属性与标签、屏幕阅读器支持、响应式尺寸、移动端与触摸支持。
高级场景：动态数据更新与刷新、数据分组与过滤、空数据点处理、常见模式与工作流、EJ1 到 EJ2 迁移指南。

使用方式

技能提供按主题划分的参考文档，建议按以下顺序查阅：

入门：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。
交互功能：references/interactive-features.md。
无障碍与响应式：references/accessibility-and-responsive.md。
高级场景：references/advanced-scenarios.md。

快速上手示例（基础饼图）：

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>

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

常见模式：

动态数据更新：更新绑定的数据数组后，图表会自动刷新。
处理选择事件：通过 IPointEventArgs 获取选中点索引与数值。
自定义颜色：两种严格模板安全的方式——在系列上使用 [palettes]（颜色数组，循环应用），或在系列上使用 pointColorMapping（颜色嵌入每个数据点）。
带位置的图例：通过 e-accumulation-legend 设置 visible、position、enableHighlight。

关键配置属性：

type：图表类型，'Pie'、'Doughnut'、'Pyramid'、'Funnel'。
dataSource：含 x 与 y 值的数据点数组。
xName：类别数据字段名。
yName：数值数据字段名。
dataLabel：标签配置（位置、格式化）。
tooltip：提示框设置（enable、template、格式化）。
palettes：系列属性，十六进制或命名颜色数组，循环应用于数据点，使用 [palettes]="palette" 写在 e-accumulation-series 上。
pointColorMapping：系列属性，每个数据对象中存放点颜色的字段名（如 "fill"），写在 e-accumulation-series 上。
animation：动画配置（enable、duration）。
startAngle：饼图/圆环图起始角度（0-360）。
explode：启用数据点分离效果。

适用场景

展示比例分布数据（饼图、圆环图）。
展示层级或分步数据（金字塔图、漏斗图）。
需要交互元素（提示框、选择、点击事件）的图表。
需要主题、颜色、渐变、动画等外观定制。
需要数据标签、图例、注释的图表。
需要无障碍（WCAG、键盘导航）与响应式设计的生产环境。
需要动态数据更新、分组、导出/打印的场景。

限制与注意事项

严格模板模式（strictTemplates: true）下，不要在 ejs-accumulationchart 上使用 [palette]（单数），它不是类型化的 @Input()，会触发 NG8002 错误。应改用系列上的 [palettes] 或 pointColorMapping。
若出现其他 NG8002 未知属性错误，需检查：AccumulationChartModule 是否在组件 imports 中、属性名是否与类型化 @Input() 完全一致（驼峰式）、服务（如 PieSeriesService）是否在 providers 中。
本技能未提供具体收费、价格、平台或效果信息。

API 参考

完整 API 文档位于 https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/ ，技能内提供 references/api-reference.md 作为综合 API 目录。核心组件包括 AccumulationChart、AccumulationSeries、AccumulationDataLabelSettings、LegendSettings、TooltipSettings；关键枚举包括 AccumulationType、AccumulationLabelPosition、LegendPosition；事件接口包括 IAccLoadedEventArgs、IAccPointRenderEventArgs、IAccLegendClickEventArgs。每份参考指南末尾附有 API Reference Summary 章节。