syncfusion-angular-circular-3d-chart

用途

本技能用于在 Angular 应用中创建 Syncfusion 的 3D 圆形图表，主要面向需要以三维透视方式展示比例数据的场景，支持饼图（Pie）和圆环图（Donut）两种图表类型。适用于从零开始搭建 3D 圆形图表、展示比例数据可视化、添加和自定义数据标签、处理空数据点、配置工具提示、设置图例、添加标题与副标题、导出或打印图表，以及确保键盘导航和屏幕阅读器无障碍等需求。

主要能力

图表类型：支持饼图和圆环图的 3D 透视展示。
数据标签：支持自动定位、自定义模板、连接线以及格式化选项。
空数据点：对缺失或零值数据点提供智能处理。
工具提示：支持自定义格式、标题和 HTML 模板。
图例：可配置位置、交互和样式。
标题：支持主标题和副标题及其自定义。
导出/打印：支持 PNG、SVG、PDF 格式的高质量输出。
无障碍：符合 WCAG 标准，支持键盘导航和 ARIA 属性。

组件面向 Angular 21+ 的独立（standalone）架构。

使用方式

技能文档按主题组织，包含以下参考文件：

API 参考：references/api-reference.md
快速入门：references/getting-started.md，涵盖安装与包设置、创建第一个 3D 圆形图表、基本组件配置、CSS 与主题导入、最小可运行示例。
饼图与圆环图配置：references/pie-donut-types.md，涵盖饼图实现、使用 innerRadius 的圆环图实现、图表类型转换、半径自定义与各种半径图表、系列配置与数据映射、从数据源映射点颜色。
数据标签与空数据点：references/data-labels-empty-points.md，涵盖启用和定位数据标签（内部/外部）、使用模板格式化数据标签、连接线自定义、空数据点检测与处理、点颜色自定义、条件显示策略。
交互：工具提示、图例与选择：references/interactivity-legends-tooltips.md，涵盖启用和配置工具提示、工具提示标题与自定义格式、使用 HTML 的工具提示模板、图例定位与自定义、图例交互（显示/隐藏系列）、点和系列选择。
外观、标题与样式：references/appearance-titles-styling.md，涵盖标题与副标题配置、系列自定义调色板、点颜色自定义、系列样式选项、主题应用与自定义、边框与填充样式。
打印、导出与无障碍：references/print-export-accessibility.md，涵盖导出为 PNG、SVG、PDF，打印功能配置，WCAG 2.1 合规指南，键盘导航支持，ARIA 属性与标签，屏幕阅读器优化。

快速入门示例（最小可运行示例）：

import { Component } from '@angular/core';
import { CircularChart3DComponent, CircularChartSeriesCollectionDirective, CircularChartSeriesDirective } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CircularChart3DComponent, CircularChartSeriesCollectionDirective, CircularChartSeriesDirective],
  template: `
    <ejs-circularchart3d id="container" [tooltip]="{ enable: true }">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series [dataSource]="chartData" xName="x" yName="y" type="Pie">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class AppComponent {
  chartData = [
    { x: 'Product A', y: 25 },
    { x: 'Product B', y: 20 },
    { x: 'Product C', y: 30 },
    { x: 'Product D', y: 25 }
  ];
}

常见模式：

模式 1：带数据标签的饼图

@Component({
  template: `
    <ejs-circularchart3d>
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="data" 
          xName="name" 
          yName="value" 
          type="Pie"
          [dataLabel]="{ visible: true, position: 'Outside', name: 'x' }">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class PieChartComponent {
  data = [
    { name: 'Sales', value: 40 },
    { name: 'Marketing', value: 30 },
    { name: 'Support', value: 20 },
    { name: 'Operations', value: 10 }
  ];
}

模式 2：带图例和工具提示的圆环图

export class DonutChartComponent {
  @ViewChild('chart')
  public chart!: CircularChart3DComponent;

  data = [
    { x: 'Chrome', y: 45, color: '#5DADE2' },
    { x: 'Firefox', y: 25, color: '#F39C12' },
    { x: 'Safari', y: 20, color: '#48C9B0' },
    { x: 'Edge', y: 10, color: '#E74C3C' }
  ];

  seriesSettings = {
    dataSource: this.data,
    xName: 'x',
    yName: 'y',
    pointColorMapping: 'color',
    innerRadius: '50%',
    type: 'Pie'
  };

  tooltipSettings = {
    enable: true,
    format: '${point.x}: ${point.y}%'
  };

  legendSettings = {
    visible: true,
    position: 'Bottom'
  };
}

模式 3：带自定义数据标签模板的图表

export class CustomLabelChartComponent {
  data = [
    { category: 'Jan', sales: 35 },
    { category: 'Feb', sales: 28 },
    { category: 'Mar', sales: 34 }
  ];

  dataLabelTemplate = '<div>${point.x}: ${point.y}K</div>';

  dataLabelSettings = {
    visible: true,
    template: this.dataLabelTemplate,
    position: 'Outside'
  };
}

关键属性参考：

type（string）：图表类型，'Pie' 或 'Donut'。
dataSource（any[]）：图表的数据对象数组。
xName（string）：用于类别/标签的数据属性。
yName（string）：用于数值的数据属性。
innerRadius（string）：圆环孔大小（0-100%，饼图为 0%，圆环图为 40-60%）。
radius（string）：图表半径（默认：最小宽度/高度的 80%）。
pointColorMapping（string）：用于点颜色的数据属性。
dataLabel（DataLabelSettings）：标签配置（visible、position、template）。
tooltip（TooltipSettings）：工具提示设置（enable、format、template、header）。
legendSettings（LegendSettings）：图例位置和行为。
title（string）：图表标题文本。
subTitle（string）：图表副标题文本。
enableSmartLabels（boolean）：自动排列标签以避免重叠（默认：true）。
emptyPointSettings（EmptyPointSettings）：处理缺失数据点。

适用场景

documentation 中列出的常见用例包括：

市场份额分布：使用饼图可视化产品或服务的市场份额。
预算分配：使用圆环图展示部门预算明细。
用户人口统计：按地区、年龄或其他类别显示受众分布。
销售构成：按产品线或区域比较销售贡献。
质量指标：以比例表示质量问题类别。
调查结果：可视化调查回复分布和百分比。

限制

资料未提供关于收费、价格、平台兼容性范围（除 Angular 21+ 外）、性能上限或具体效果保证的说明。安装命令、包名细节及主题导入的具体代码在资料中未完整给出，需查阅对应参考文件。

技能介绍

用途

主要能力

使用方式

适用场景

限制