OutSystems低代码平台：AI绘图的优势、流程与典型案例

在OutSystems AI低码平台中创建图表通常只需三个步骤：首先，拖拽内置的Chart组件并将其与数据源Action绑定；接着，利用AI Copilot通过自然语言描述生成图表逻辑；最后，还能通过REST API灵活接入外部图表服务。

如果您在OutSystems AI低码平台中需要生成图表来可视化业务数据，却发现界面没有提供直接的绘图入口或图表组件未能正确渲染，这通常是由于数据源未绑定、图表控件未启用或AI辅助绘图功能未激活所致。以下是实现图表绘制的具体方法：

一、使用内置Chart组件拖拽配置

OutSystems原生支持多种图表类型（如柱状图、折线图、饼图等），您可以直接通过标准UI组件库快速集成，无需编写JavaScript代码，所有的渲染逻辑均由平台自动处理。

1、在模块的逻辑流中，确保已定义好返回结构化数据的Action（例如GetSalesData），其输出结构应包含X轴字段（如Month）和Y轴字段（如Revenue）。

2、进入目标页面的编辑器，在左侧组件面板中展开“Charts”分类，将Column Chart或Line Chart拖放至画布上的指定区域。

3、选中该图表组件，在右侧属性面板中，将Data Source设置为前述Action的输出变量（例如GetSalesData.List）。

4、在X Axis Field中选择字符串类型字段（如Month），在Y Axis Field中选择数值型字段（如Revenue）。

5、点击预览按钮，验证图表是否能按预期动态加载并响应数据变更。

二、调用AI绘图助手（OutSystems AI Copilot）生成图表逻辑

OutSystems AI Copilot能够基于您的自然语言描述，自动生成图表绑定逻辑及前端配置，特别适合不熟悉组件属性映射关系的低代码用户。

1、在页面编辑器的空白处右键点击，选择Ask AI Copilot选项。

2、在弹出的对话框中输入明确的指令，例如：“根据订单表中按月份统计的总金额，生成一个带图例的堆叠柱状图”。

3、等待AI返回建议的操作序列，确认无误后点击Apply Suggestion，平台将自动创建对应的Aggregate操作、绑定Chart组件并配置字段映射。

4、检查AI生成的Aggregate是否已添加必要的聚合设置（例如Sum(Orders.Amount) Group By Orders.OrderMonth），如果缺失请手动补充完整。

5、保存并发布模块，刷新页面即可查看AI生成图表的实际渲染效果。

三、通过REST API接入外部图表服务（如Chart.js封装的微服务）

当内置图表无法满足定制化样式或复杂交互需求时，您可以外接轻量级的图表服务来实现增强渲染，所有数据仍由OutSystems统一管理。

1、在Service Studio中，打开“Manage Dependencies”，添加已部署的ChartRendererAPI REST API连接器。

2、创建一个新的Action，使用HTTP Request节点调用该API的POST端点，请求体为JSON格式，其中需包含data（数据数组）、type（“bar”或“pie”等）以及options（颜色或动画配置）等字段。

3、在页面中添加一个Container组件，并将其HTML Element属性设置为div，ID指定为chart-container。

4、在页面的OnInitialize事件中，调用上述Action，并在其Success回调中执行JavaScript片段：document.getElementById("chart-container").innerHTML = result.HtmlContent;。

5、请确保目标微服务返回的是完整且可执行的HTML和内联Script片段，同时没有跨域访问限制。