CDS View-Part18 不用JS和HTML做Fiori之条形图+甜甜圈图

闲来无事跟着帖子做个甜甜圈图和条形图
原文：https://sapyard.com/cds-part-18-bar-chart-donut-chart-using-cds-views/
最关键的就是理解CDS View中各个Annotation关键字的含义，理解之后，如果客户没有过多客制化需求，做一个Fiori App可以非常之高效。我想这也是SAP的努力所在。

条形图

原文分6步，太细了，两步就行：

1. 后端CDS开发、并暴露注册OData，对照下图和编号依次是：
   
   (1):使用IDE工具Eclipse创建CDS View 'ZTM_FNS'
   (2):CDS View对应的SQL view name是‘ZTM_FNS_SQL’
   (3):使用@OData.publish(3)将其发布为OData服务，在前端使用TCODE/N/IWFND/MAINT_SERVICE进行注册，这个过程略过。
   (4):@UI.lineItem使用非常广泛，@UI.lineItem: [{ position: 10, label: ‘Company Code ‘}]这里指定了它的位置和描述
   (5):位置使用10,20,30,这样10的倍数，10是第一个位置
   (6):如果要在一个APP上放两个卡片，比如我们要做的条形图和甜甜圈图两个卡片，就要使用属性关键字qualifier，这里用了Q1和Q1来分别设定两个卡片
   (7):字段TOT_PLANTS被指定类型为Datapoint，将字段指定为数据点时，需要在#AS_DATAPOINT类型之前先指定UI.datapoint属性。
   (8):指定字段类型为Datapoint
   (9):CriticalityCalculation指定临界值属性，接下来又使用了toleranceRangeLowValue: 8, 和deviationRangeHighValue: 10来指定其它临界值，这里的意思是8-10之间是绿色，超过10是红色，低于8是黄色。
   (10): 首先这个数据集是一个SQL语句，取的是根据公司代码bukrs分组汇总Plant的数量，
   当我们在CDS View中编写UI Annotation时，它会在后台生成用于Fiori App的注释文件。这个注释文件具有_VAN后缀。如果你的CDS View的名字是ZMATMAS，那么你的OData服务将是ZMATMAS_CDS，你的Annotation文件将是ZMATMAS_CDS_VAN。这个单独创建一个annotate view效果是一样的。
2. 前端使用模版创建App以及条形图卡片
   在后端发布OData服务后，New-Project from template,Catagroy:SAP Fiori Elements-Overview Page Application.
   
   
   
   
   
   完成。但此时执行App，什么也没有，因为这只是搭建了Card App的基础，下面添加Card:右键项目New-Card
   
   
   
   
   这里一定要注意后面加上qualifier: Q1
   
   完成后会看到manifest文件中添加了Card属性。就是刚才的一些配置内容，也就是说我们也可以通过直接在manifest文件中添加内容来实现card添加。
   
   此时执行，已经可以看到新添加的条形图

甜甜圈图

甜甜圈图卡片，也是两部分，后台CDS View和前台Manifest声明

1. CDS View
   (1):一个CDS View为多个Card做数据源，用不同的qualifier来区分
   (2):图表类型
   (3):维度和度量
   (4):维度和度量的属性
   (5):（role属性具体怎么用还不是很清楚）
   (6):
   
2. 后端New-Card