syncfusion-angular-3d-chart

Syncfusion Angular 3D 图表组件提供创建交互式三维数据可视化的解决方案，支持多种图表类型、高级自定义选项和数据绑定能力。组件面向 Angular 21+ 的独立架构设计，包含无障碍功能、键盘导航以及多种导出格式。

用途

在 Angular 应用中实现 Syncfusion 3D 图表，用于展示交互式三维数据可视化。适合需要从零创建 3D 图表、以三维方式呈现数据、以及进行外观与交互定制的场景。

主要能力

• 多种图表类型：柱状图（Column）、条形图（Bar）、堆叠柱状图（Stacked Column）、堆叠条形图（Stacked Bar）。
• 轴类型：类别轴、数值轴、日期时间轴、对数轴。
• 交互功能：工具提示、选择模式、数据标签、图例。
• 自定义：颜色、主题、样式、三维尺寸。
• 数据绑定：本地数组、远程数据源、动态更新。
• 导出与打印：PNG、SVG、PDF 格式。
• 无障碍：WCAG 合规、ARIA 属性、键盘支持。

使用方式

安装并配置包，创建首个 3D 图表，配置基本组件与 CSS/主题导入。基本用法示例（最小可运行示例）：

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

动态数据绑定示例（实时更新）：

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

自定义调色板示例：

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

关键属性包括：primaryXAxis（配置 X 轴类型、标签、范围）、primaryYAxis（配置 Y 轴）、dataSource（数据对象数组）、xName / yName（X/Y 值对应数据属性）、type（图表类型：Column、Bar、StackedColumn、StackedBar）、name（图例系列名）、palettes（自定义颜色数组）、enableTooltip（悬停显示工具提示）、legendSettings（配置图例外观与行为）、tooltip（自定义工具提示模板与样式）、marker（数据点标记）、dataLabel（启用并格式化数据标签）。

适用场景

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

限制

关于该组件的授权方式、收费与价格信息，资料未提供，故暂未提供。平台兼容性、浏览器支持范围、性能上限等资料未提供，故暂未提供。具体安装与包管理步骤需参见参考资料中的 getting-started 文档，资料未在本页给出命令内容。