SAP Fiori Elements 里的 Chart 怎么建,一段 @UI.chart 背后的数据可视化逻辑

SAP Fiori Elements 里的 Chart 怎么建,一段 @UI.chart 背后的数据可视化逻辑

最近在 SAP Fiori Elements 项目里做销售类页面时,经常会碰到一个很实际的问题。后台的 CDS View 已经把销售是某一张订单是多少金额,而是另一类问题,例如哪些客户贡献了更多销售额,最近几个月销售趋势是否在上升,不同产品线之间的收入差距有多大。

如果这些问题仍然全部塞进表格里,信息虽然存在,却很难一眼看出规律。

SAP Fiori 在这里提供了一条非常典型的 metadata-driven 路径。我们不一定需要在 SAPUI5 Controller 里手工创建 Chart,不需要自己编写大量 JavaScript 去告诉前端哪个字段放在横轴、哪个字段放在纵轴,也不需要在 XML View 里把数据绑定逻辑全部硬编码进去。很多时候,只需要在 CDS 层描述图表的业务语义,SAP Fiori Elements 就能根据这些 metadata 去理解数据应该怎样被可视化。

这里最核心的注解就是@UI.chart

SAP 官方对它的定位很明确,@UI.chart用来定义 Chart 的属性,它是在 CDS View 层级定义的,并引用这个 Chart 需要使用的元素,同时还可以提供标题和说明文字。。

... @UI.chart: { title: 'Gross Amount by Customer', description: 'Line-chart displaying the gross amount by customer', chartType: #LINE, dimensions: [ 'CompanyNam