syncfusion-angular-chart

用途

Syncfusion Angular Chart 用于在 Angular 应用中实现专业的数据可视化。当需要展示数值数据、分析趋势、比较分类数据、呈现金融数据、进行统计分析、展示多维数据、实时监控、交互式探索、自定义可视化或构建无障碍图表时，可使用该组件。

主要能力

25 种以上系列类型：折线、样条、阶梯线、面积、柱状、条形、散点、气泡、饼图、金融类（K 线、OHLC）、统计类（箱线图、直方图、帕累托图）、极坐标、雷达、瀑布图等。
交互功能：缩放（选择、鼠标滚轮、捏合）、平移、工具提示、十字准线、轨迹球、选择、数据编辑。
多轴支持：主轴、次轴及多轴，支持数值、日期时间、对数、分类等数据类型。
图表元素：图例、数据标记、数据标签、注释、趋势线、技术指标、带状线。
数据绑定：本地数组、远程数据（OData、DataManager）、JSON 源、动态更新。
自定义：主题、CSS 样式、调色板、响应式设计、动画。
导出与打印：导出为 PDF、SVG、PNG、JPEG、CSV、XLSX。
无障碍：WCAG 合规、键盘导航、ARIA 属性、国际化、RTL 支持。
WebMCP 集成：通过 enableWebMcp 和 webMcpSettings 自动注册内置图表检查与变更工具，供浏览器模型上下文和 AI 智能体操作图表。

使用方式

在 Angular 项目中安装 @syncfusion/ej2-angular-charts 包，导入 ChartModule 并配置所需服务（如 CategoryService、LineSeriesService、DateTimeService 等）。在组件模板中使用 <ejs-chart> 标签，通过 <e-series-collection> 定义系列，并绑定 primaryXAxis、primaryYAxis、title 等属性。数据可通过 dataSource 绑定本地数组或远程数据源。

最小示例：

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { CategoryService, LineSeriesService, DateTimeService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';

@Component({
imports: [ ChartModule ],
providers: [ CategoryService, LineSeriesService, StepLineSeriesService, SplineSeriesService, StackingLineSeriesService, DateTimeService,
        SplineAreaSeriesService, MultiColoredLineSeriesService, ParetoSeriesService, ColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis'
    [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Line' xName='month' yName='sales'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public chartData?: Object[];
    public title?: string;
     public primaryXAxis?: Object;
      public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData = [
          { month: 'Jan', sales: 35 },
          { month: 'Feb', sales: 28 },
          { month: 'Mar', sales: 34 },
          { month: 'Apr', sales: 32 },
          { month: 'May', sales: 40 },
          { month: 'Jun', sales: 32 },
          { month: 'Jul', sales: 35 },
          { month: 'Aug', sales: 55 },
          { month: 'Sep', sales: 38 },
          { month: 'Oct', sales: 30 },
          { month: 'Nov', sales: 25 },
          { month: 'Dec', sales: 32 }
      ];
        this.primaryXAxis = {
            interval: 1,
            valueType: 'Category',
        };
        this.primaryYAxis =
        {
            title: 'Sales',
        },
        this.title = 'Monthly Sales Comparison';
    }
}

适用场景

趋势分析：使用折线、样条或面积图展示随时间变化的数据趋势。
比较：使用柱状、条形或分组图比较分类数据。
金融数据：使用 K 线、OHLC 或技术指标实现股票图表。
统计分析：使用箱线图、直方图或帕累托图展示分布。
多维数据：使用散点图或气泡图进行相关性分析。
实时监控：为仪表板或监控系统创建实时更新图表。
交互式探索：添加缩放、平移、十字准线、工具提示或选择功能。
AI 智能体集成：启用 WebMCP，使浏览器模型上下文和 AI 智能体可通过注册工具检查和操作图表。
自定义可视化：组合多种系列类型、轴或创建复杂布局。
无障碍图表：实现符合 WCAG 的图表，支持键盘导航和屏幕阅读器。

限制

文档未提供关于收费、价格、平台限制或性能上限的具体信息，暂未提供。使用时应遵循文档中的 API 准确性标准，使用 Syncfusion v33+ 的精确属性名（如 legendSettings 而非 legend），并注意常见命名陷阱。

技能介绍

用途

主要能力

使用方式

适用场景

限制