OutSystemsAI低码平台怎制图_OutSystemsAI低码绘法【低绘】

2026-01-19 · 前沿科技 · 201191

在OutSystems AI低码平台中生成图表需三步：一、拖拽内置Chart组件并绑定Action数据源；二、用AI Copilot自然语言生成图表逻辑；三、通过REST API接入外部图表服务。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜

如果您在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、点击预览按钮，验证图表是否按预期动态加载并响应数据变更。

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

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

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

造次

Liblib打造的AI原创IP视频创作社区

下载

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

4、检查AI生成的Aggregate是否已添加必要聚合（如Sum(Orders.Amount) Group By Orders.OrderMonth），若缺失则手动补全。

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

当内置图表无法满足定制化样式或交互需求时，可通过外接轻量级图表服务实现增强渲染，所有数据仍由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内联片段，且无跨域限制。