syncfusion-angular-3d-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular 3D Chart

使用Syncfusion实现Angular 3D图表

When to Use This Skill

何时使用本技能

Use this skill when you need to:

Create a 3D chart from scratch in an Angular application
Display data in interactive 3D visualizations (bar, column, stacked variants)
Customize chart appearance, colors, and styling
Configure axes with different types (category, numeric, datetime, logarithmic)
Add interactive features like tooltips, selection, data labels, and legends
Implement data binding with local or remote data
Export or print charts as images or PDFs
Ensure accessibility for screen readers and keyboard navigation
Work with dimensions and 3D perspective settings

当你需要以下操作时，可使用本技能：

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

Component Overview

组件概述

The Syncfusion Angular 3D Chart component provides a comprehensive solution for creating interactive three-dimensional data visualizations. It supports multiple chart types (bar, column, stacked configurations), advanced customization options, and robust data binding capabilities. The component is designed for Angular 21+ with standalone architecture and includes accessibility features, keyboard navigation, and multiple export formats.

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

Key Capabilities

核心功能

Multiple Chart Types: Bar, Column, Stacked Bar, Stacked Column
Axis Types: Category, Numeric, DateTime, Logarithmic
Interactive Features: Tooltips, selection modes, data labels, legends
Customization: Colors, themes, styling, 3D dimensions
Data Binding: Local arrays, remote data sources, dynamic updates
Export/Print: PNG, SVG, PDF formats
Accessibility: WCAG compliance, ARIA attributes, keyboard support

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

Documentation and Navigation Guide

文档与导航指南

API Reference

API参考

📄 Read: references/api-reference.md

📄 阅读：references/api-reference.md

Getting Started

快速入门

📄 Read: references/getting-started.md

Installation and package setup
Create your first 3D chart
Basic component configuration
CSS and theme imports
Minimal working example

📄 阅读：references/getting-started.md

安装与包配置
创建你的第一个3D图表
基础组件配置
CSS与主题导入
最简运行示例

Chart Types & Configuration

图表类型与配置

📄 Read: references/chart-types.md

Bar chart implementation
Column chart implementation
Stacked column configuration
Stacked bar configuration
Switching between chart types
Series configuration

📄 阅读：references/chart-types.md

条形图实现
柱形图实现
堆叠柱形图配置
堆叠条形图配置
切换图表类型
系列配置

Axis & Data Setup

坐标轴与数据设置

📄 Read: references/axis-customization.md

Category axis setup
Numeric axis configuration
DateTime axis setup
Logarithmic axis support
Multi-pane configurations

📄 Read: references/axis-labels.md

Label formatting and display
Label positioning and rotation
Custom label templates
Label appearance customization

📄 阅读：references/axis-customization.md

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

📄 阅读：references/axis-labels.md

标签格式化与显示
标签定位与旋转
自定义标签模板
标签外观自定义

Data & Labels

数据与标签

📄 Read: references/data-labels.md

Enable and position data labels
Label formatting options
Custom data label templates
Conditional label display

📄 Read: references/working-with-data.md

Data binding approaches (arrays, objects)
Category data configuration
Remote data loading
Real-time data updates
Data refresh patterns

📄 阅读：references/data-labels.md

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

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

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

Appearance & Styling

外观与样式

📄 Read: references/appearance.md

Custom color palettes
Point color customization
Series styling options
Theme application

📄 Read: references/dimensions.md

3D depth and perspective control
Chart width and height configuration
Rotation and tilt settings
Wall and corner customization

📄 阅读：references/appearance.md

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

📄 阅读：references/dimensions.md

3D深度与透视控制
图表宽高配置
旋转与倾斜设置
墙体与边角自定义

Interactive Features

交互功能

📄 Read: references/tool-tip.md

Enable and configure tooltips
Tooltip templates and formatting
Custom styling options
Tooltip events and interactions

📄 Read: references/selection.md

Point selection modes
Multiple selection configurations
Selection styling
Selection events

📄 Read: references/legend.md

Enable and position legends
Legend customization
Custom legend items
Legend interactions

📄 阅读：references/tool-tip.md

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

📄 阅读：references/selection.md

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

📄 阅读：references/legend.md

启用与定位图例
图例自定义
自定义图例项
图例交互

Advanced Features

高级功能

📄 Read: references/print-export.md

Export as PNG, SVG, PDF
Print functionality
Export configuration options
File naming and paths

📄 Read: references/accessibility.md

WCAG 2.1 compliance guidelines
Keyboard navigation support
ARIA attributes and labels
Screen reader optimization
Color contrast and visual accessibility

📄 阅读：references/print-export.md

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

📄 阅读：references/accessibility.md

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

Quick Start Example

快速入门示例

Here's a minimal example to get you started:

typescript

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}%' };
}

以下是一个最简入门示例：

typescript

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}%' };
}

Common Patterns

常见模式

Pattern 1: Dynamic Data Binding

模式1：动态数据绑定

When user needs real-time updates, bind data to a property and use change detection:

typescript

@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 }
    ];
  }
}

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

typescript

@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); // 每5秒更新一次
  }

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

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

Pattern 2: Multiple Chart Types

模式2：多图表类型切换

When user needs to switch between visualization types:

typescript

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

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

当用户需要切换可视化类型时：

typescript

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

  switchChartType(type: string) {
    this.chartType = type; // 修改系列中的'type'属性
  }
}

Pattern 3: Custom Color Palette

模式3：自定义调色板

When user wants brand-specific colors:

typescript

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

当用户需要品牌专属颜色时：

typescript

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

Key Props Reference

核心属性参考

Prop	Type	Purpose
`primaryXAxis`	AxisModel	Configures X-axis (type, labels, range)
`primaryYAxis`	AxisModel	Configures Y-axis (type, labels, range)
`dataSource`	any[]	Array of data objects for chart
`xName`	string	Data property for X values
`yName`	string	Data property for Y values
`type`	string	Chart type (Column, Bar, StackedColumn, StackedBar)
`name`	string	Series name for legend
`palettes`	string[]	Custom color array for series
`enableTooltip`	boolean	Show tooltips on hover
`legendSettings`	LegendSettings	Configure legend appearance and behavior
`tooltip`	TooltipSettings	Customize tooltip template and styling
`marker`	MarkerSettings	Configure data point markers
`dataLabel`	DataLabelSettings	Enable and format data labels

属性	类型	用途
`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	启用并格式化数据标签

Common Use Cases

常见使用场景

Sales Dashboard: Display monthly sales by region using stacked columns
Inventory Analytics: Compare stock levels across warehouses using bar charts
Performance Tracking: Visualize KPIs over time with multiple series
Comparative Analysis: Side-by-side data comparison using grouped columns
Trend Analysis: Track changes across categories with animated transitions
Budget vs. Actual: Compare planned vs. actual spending using stacked configurations

For more information, visit the Syncfusion Angular 3D Chart Documentation.

销售仪表盘：使用堆叠柱形图按区域展示月度销售额
库存分析：使用条形图对比各仓库的库存水平
绩效跟踪：用多系列图表可视化随时间变化的KPI
对比分析：使用分组柱形图进行数据并排对比
趋势分析：通过动画过渡跟踪各分类的变化
预算vs实际：使用堆叠配置对比计划支出与实际支出

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