syncfusion-angular-circular-3d-chart

实现 Syncfusion Angular 3D 环形图

何时使用此技能

在以下情况下使用此技能：

• 从头开始在 Angular 应用程序中创建 3D 环形图
• 显示饼图和圆环图，以可视化比例数据
• 添加和自定义数据标签，包括位置和模板
• 妥善处理图表中的空数据点
• 配置工具提示，包括自定义格式和模板
• 设置和自定义图例，以增强图表交互性
• 为可视化添加标题和副标题
• 将图表导出或打印为图像或 PDF
• 确保无障碍访问，支持键盘导航和屏幕阅读器

---

组件概述

Syncfusion Angular 3D 环形图组件为创建三维饼图和圆环图可视化提供了强大的解决方案。它支持多种数据表示方式，并提供交互功能，包括智能标签定位、自定义数据标签模板、工具提示格式设置和全面的导出功能。该组件专为采用独立架构的 Angular 21+ 设计，并包含无障碍访问功能，带来更具包容性的用户体验。

主要功能

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

---

文档与导航指南

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	标签配置（可见性、位置、模板）
tooltip	TooltipSettings	工具提示设置（启用、格式、模板、标题）
legendSettings	LegendSettings	图例位置和行为
title	string	图表标题文本
subTitle	string	图表副标题文本
enableSmartLabels	boolean	自动排列标签以避免重叠（默认值：true）
emptyPointSettings	EmptyPointSettings	处理缺失的数据点

---

常见用例

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

---

如需了解更多信息，请访问 Syncfusion Angular Circular 3D Chart 文档。