syncfusion-angular-3d-chart

实现 Syncfusion Angular 3D 图表

何时使用此技能

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

• 从头开始创建 3D 图表，用于 Angular 应用程序
• 显示数据，以交互式 3D 可视化形式呈现（条形图、柱形图及其堆积变体）
• 自定义图表外观、颜色和样式
• 使用不同类型的坐标轴（分类、数值、日期时间、对数）配置坐标轴
• 添加交互功能，例如工具提示、选择、数据标签和图例
• 使用本地或远程数据实现数据绑定
• 将图表导出或打印为图像或 PDF
• 确保无障碍访问，支持屏幕阅读器和键盘导航
• 使用尺寸和 3D 透视设置

---

组件概述

Syncfusion Angular 3D Chart 组件提供了一套全面的解决方案，可用于创建交互式三维数据可视化。它支持多种图表类型（条形图、柱形图、堆积配置）、高级自定义选项和强大的数据绑定功能。该组件专为采用独立架构的 Angular 21+ 设计，并包含无障碍访问功能、键盘导航和多种导出格式。

主要功能

• 多种图表类型： 条形图、柱形图、堆积条形图、堆积柱形图
• 坐标轴类型： 分类、数值、日期时间、对数
• 交互功能： 工具提示、选择模式、数据标签、图例
• 自定义： 颜色、主题、样式、3D 尺寸
• 数据绑定： 本地数组、远程数据源、动态更新
• 导出/打印： PNG、SVG、PDF 格式
• 无障碍访问： 符合 WCAG 标准、ARIA 属性、键盘支持

---

文档和导航指南

API 参考

📄 阅读： references/api-reference.md

入门

📄 阅读： references/getting-started.md

• 安装和软件包设置
• 创建第一个 3D 图表
• 基本组件配置
• CSS 和主题导入
• 最小可运行示例

图表类型和配置

📄 阅读： references/chart-types.md

• 条形图实现
• 柱形图实现
• 堆积柱形图配置
• 堆积条形图配置
• 在不同图表类型之间切换
• 系列配置

坐标轴和数据设置

📄 阅读： references/axis-customization.md

• 分类坐标轴设置
• 数值坐标轴配置
• 日期时间坐标轴设置
• 对数坐标轴支持
• 多窗格配置

📄 阅读： references/axis-labels.md

• 标签格式和显示
• 标签位置和旋转
• 自定义标签模板
• 标签外观自定义

数据和标签

📄 阅读： references/data-labels.md

• 启用并定位数据标签
• 标签格式选项
• 自定义数据标签模板
• 条件式标签显示

📄 阅读： references/working-with-data.md

• 数据绑定方式（数组、对象）
• 分类数据配置
• 远程数据加载
• 实时数据更新
• 数据刷新模式

外观和样式

📄 阅读： references/appearance.md

• 自定义调色板
• 数据点颜色自定义
• 系列样式选项
• 应用主题

📄 阅读： references/dimensions.md

• 3D 深度和透视控制
• 图表宽度和高度配置
• 旋转和倾斜设置
• 墙面和角落自定义

交互功能

📄 阅读： references/tool-tip.md

• 启用和配置工具提示
• 工具提示模板与格式设置
• 自定义样式选项
• 工具提示事件与交互

📄 阅读： references/selection.md

• 数据点选择模式
• 多种选择配置
• 选择样式
• 选择事件

📄 阅读： references/legend.md

• 启用和定位图例
• 图例自定义
• 自定义图例项
• 图例交互

高级功能

📄 阅读： references/print-export.md

• 导出为 PNG、SVG、PDF
• 打印功能
• 导出配置选项
• 文件命名和路径

📄 阅读： references/accessibility.md

• WCAG 2.1 合规指南
• 键盘导航支持
• ARIA 属性和标签
• 屏幕阅读器优化
• 色彩对比度和视觉无障碍

---

快速入门示例

以下是一个帮助你快速入门的最简示例：

import { Component } from '@angular/core';
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective],
  template: `
    <ejs-chart3d [primaryXAxis]="xAxis" [primaryYAxis]="yAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="chartData" xName="month" yName="sales" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class AppComponent {
  chartData = [
    { month: 'Jan', sales: 35 },
    { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 },
    { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 }
  ];

  xAxis = { valueType: 'Category' };
  yAxis = { labelFormat: '{value}%' };
}

---

常见模式

模式 1：动态数据绑定

当用户需要实时更新时，将数据绑定到属性并使用变更检测：

@Component({
  template: `
    <ejs-chart3d [primaryXAxis]="xAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]="dynamicData" xName="x" yName="y" type="Column">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  `
})
export class DynamicChartComponent {
  dynamicData: any[] = [];

  constructor() {
    this.loadData();
    setInterval(() => this.loadData(), 5000); // Update every 5 seconds
  }

  loadData() {
    this.dynamicData = this.generateData();
  }

  private generateData() {
    return [
      { x: 'A', y: Math.random() * 100 },
      { x: 'B', y: Math.random() * 100 }
    ];
  }
}

模式 2：多种图表类型

当用户需要在不同可视化类型之间切换时：

export class MultiTypeChartComponent {
  chartType: string = 'Column';

  switchChartType(type: string) {
    this.chartType = type; // Changes 'type' in series
  }
}

模式 3：自定义调色板

当用户需要使用符合品牌风格的颜色时：

@Component({
  template: `
    <ejs-chart3d [palettes]="customPalette">
      ...
    </ejs-chart3d>
  `
})
export class CustomPaletteComponent {
  customPalette = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8'];
}

---

关键属性参考

属性	类型	用途
primaryXAxis	AxisModel	配置 X 轴（类型、标签、范围）
primaryYAxis	AxisModel	配置 Y 轴（类型、标签、范围）
dataSource	any[]	图表数据对象数组
xName	string	X 值对应的数据属性
yName	string	Y 值对应的数据属性
type	string	图表类型（Column、Bar、StackedColumn、StackedBar）
name	string	图例中显示的系列名称
palettes	string[]	系列的自定义颜色数组
enableTooltip	boolean	悬停时显示工具提示
legendSettings	LegendSettings	配置图例的外观和行为
tooltip	TooltipSettings	自定义工具提示模板和样式
marker	MarkerSettings	配置数据点标记
dataLabel	DataLabelSettings	启用并设置数据标签格式

---

常见用例

1. 销售仪表板： 使用堆叠柱形图按区域显示月度销售额
2. 库存分析： 使用条形图比较各仓库的库存水平
3. 绩效跟踪： 使用多个系列可视化随时间变化的 KPI
4. 对比分析： 使用分组柱形图并排比较数据
5. 趋势分析： 使用动画过渡跟踪各类别的变化
6. 预算与实际支出： 使用堆叠配置比较计划支出与实际支出

---

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