syncfusion-react-charts

用途

Syncfusion React Charts 是一个数据可视化组件，用于在 React 应用中创建和渲染图表。该技能适用于以下场景：创建和渲染区域图、条形图、柱状图、折线图、散点图等图表；配置图表坐标轴并定制其外观；绑定本地数据、远程数据（DataManager），或使用 OData/WebAPI/自定义适配器；动态添加、删除或替换数据点（addPoint、removePoint、setData）；定制图表外观（颜色、标签、图例、批注）；配置数据标签（必须放在 marker.dataLabel 内，而非直接放在系列上）；实现用户交互（选择、缩放、工具提示）；启用 WebMCP 以便浏览器模型上下文和 AI 智能体检查并操作渲染后的图表；添加财务指标和技术分析；处理无障碍与国际化；排查图表渲染或数据问题。

主要能力

20 多种图表类型（笛卡尔、极坐标、雷达、饼图、环形图等）
多种坐标轴（分类、数值、日期时间、对数）
财务指标和 K 线图
高级交互（缩放、平移、十字准线、工具提示）
响应式设计与无障碍支持
打印和导出功能
WebMCP 集成，支持自动工具注册、所选工具允许列表、执行控制以及 AI 智能体访问

使用方式

该技能以文档参考和代码示例的形式提供指导。推荐的参考文档包括：

API 参考：ChartComponent 属性、方法与事件、SeriesDirective 属性、模型接口、模块服务等完整参考。
快速入门：安装与包设置、创建第一个图表、CSS 导入与主题配置、基础示例、包结构概览。
图表类型：20 多种类型概览、各类型适用场景、常见类型基础示例、类型专属配置。
坐标轴与定制：分类/数值/日期时间/对数坐标轴、标签与格式化、多坐标轴、范围与间隔、交叉与定位。
系列与数据：系列配置、本地数据绑定、通过 DataManager 远程绑定、ODataAdaptor/ODataV4Adaptor/WebApiAdaptor/自定义适配器、离线模式与懒加载、通过 addPoint/removePoint/setData 或 React state 动态更新、多系列处理、数据校验与边界情况。
外观与样式：图例配置与定位、数据标签与格式化、图表批注、渐变与颜色定制、标题/副标题/描述样式。
用户交互：选择与高亮、缩放与平移、工具提示与十字准线、图表同步、事件处理模式。
WebMCP 与 AI 智能体集成：生成完整 React Chart WebMCP 示例；导入并注入 WebMcpChart；设置 enableWebMcp={true} 并使用稳定的 ChartComponent ID；配置 webMcpSettings.name、tools 和 exposedTo；自动注册全部内置工具，或通过已验证的工具名允许列表限制注册；getWebMcpTools() 仅用于诊断、测试或直接执行；使用 beforeWebMcpToolExecute 进行校验、取消或控制确认；保留 WebMCP 参考示例定义的模块注入列表；不要生成手动注册按钮或调用 registerWebMcpTools()；对照已验证的内置工具列表校验生成工具名。
高级功能：财务图表类型（K 线、HLOC、高低）、技术指标（移动平均、趋势线等）、多窗格与指标窗格、无障碍（WCAG 合规、键盘导航）、国际化与本地化。

快速开始示例：

import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, Category, Legend, Tooltip } from '@syncfusion/ej2-react-charts';

export default function BasicChart() {
  const data = [
    { x: 'Jan', y: 35 },
    { x: 'Feb', y: 28 },
    { x: 'Mar', y: 34 },
    { x: 'Apr', y: 32 },
    { x: 'May', y: 40 }
  ];

  return (
    <ChartComponent id='charts'>
      <Inject services={[LineSeries, Category, Legend, Tooltip]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Line' />
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}

常见模式包括：

多系列图表：在 SeriesCollectionDirective 内添加多个 SeriesDirective，用于展示共享坐标轴的多个数据集。
动态数据更新：三种方式——a) React state（简单重渲染）；b) addPoint/removePoint/setData（命令式，带画）；c) 远程数据绑定。
远程数据绑定：使用 DataManager 与适配器从 REST API 或 OData 服务绑定数据，如 WebApiAdaptor；其他适配器包括 ODataAdaptor（OData v3）、ODataV4Adaptor（OData v4），以及通过扩展 ODataAdaptor 实现的自定义适配器。
数据标签：必须放在 marker.dataLabel 内，需注入 DataLabel 服务。
自定义工具提示：使用格式化模板增强体验。
响应式设计：使用容器样式使图表响应式，例如 width='100%' height='400px'。

适用场景

销售仪表盘：柱状图展示收入与折线图展示趋势组合。
时间序列分析：使用日期时间坐标轴与折线图处理时间数据。
对比分析：多系列柱状图比较类别。
财务分析：K 线图搭配移动平均指标。
分布分析：直方图或箱线图处理统计数据。
实时监控：使用 addPoint/removePoint 实现平滑动画的实时数据流。
REST API 远程数据：将 DataManager 与 WebApiAdaptor 或 ODataAdaptor 直接绑定到系列。
服务端 OData：使用 ODataV4Adaptor 和 Query 在服务端过滤和分页。

限制

资料中未提供关于收费、价格、平台兼容版本、性能上限或效果保证的具体信息。使用前请参考官方 API 文档、在线演示和 GitHub 仓库以获取最新细节。

外部资源：

官方 API 文档：https://ej2.syncfusion.com/react/documentation/api/chart/
在线演示：https://ej2.syncfusion.com/react/demos/
GitHub 仓库：https://github.com/syncfusion/ej2-react-ui-components

技能介绍

用途

主要能力

使用方式

适用场景

限制