大家好，
我最近不得不创建一些演示来可视化HANA XS系统中的数据。团队为我创建了一些
odata（xsodata）服务，"任务"是要有一个UI5/Fiori应用程序通过不同的图表显示数据。
有很多例子和帖子，但我找不到我在这篇帖子中遇到的一些问题的答案。
这里是我们使用UI5构建的应用程序。
应用程序基本上以不同的方式显示一个odata服务的销售信息。
以下是我在原型制作过程中遇到的一些挑战：
1。CORS公司(\u资源\u共享).
自从我在本地使用JSbin开始开发以来，我就一直遇到CORS问题。
一个简单的解决方法是使用chrome和startvia窗口->运行或dos提示符，云服务器的，使用如下参数：
chrome.exe–禁用web安全或
chrome.exe –禁用web安全–允许从文件访问文件
允许本地文件访问。
注意：确保关闭所有chrome.exe使用命令行参数启动chrome之前的任务/会话。
您应该在chrome标题中看到一条消息，如：
这里是一个SAPUI5图表示例，您可以使用本地json源
(？html，输出）或使用附加的zip文件或文章末尾列出的Github url。
如果浏览器安全设置正确并且json数据文件是正确的路径，在执行jsbin示例后，您应该看到以下
图片。
2。odata服务的xml和json模型之间的区别。
我遇到的一个挑战是，大数据的4，使用xml或json格式绑定odata服务的数据有不同的方法。正常的odata服务调用将调用$metadata，基本上需要一个工作的真正odata服务vsjson，您可以处理脱机json文件，如在我的jsbin示例或附加的zip文件/github中，
为了绑定odata，您只需要使用实体url路径。
示例：
路径："/Opportunities"，//xsodata nativ binding（xml）
路径："/d/results"，//同一服务的Json xsodata绑定
注意：xsodata服务的Json模型绑定总是使用路径"/d/results"。
这里是一个使用odata（xml）模型的气泡图示例。
JSBin中的代码
带有本地json数据的JSbin是开始"摆弄"数据和图表的好地方代码，但最终你
想要移动到odata以利用odata的所有功能，特别是当图表和数据变得更复杂时。
3。使用哪个图表库？
SAP UI5提供viz和makit以及其他几个库。我只关注makit和viz，最后使用了viz。
这里是makit库的SAP演示应用程序。
https://sapui5.netweaver.ondemand.com/sdk/test-resources/sap/makit/demokit/index.html
这里是viz库的SAP演示
https://sapui5.hana.ondemand.com/sdk/test-resources/sap/viz/Charting.html
这里是json makit派的代码图表示例：
没有什么特别的原因让我在makit图书馆上与viz结缘，只是这里似乎有更多的信息sap.viz公司在外面。还有其他图表库，如d3.js、c3.js和数据透视.js可使用哪一个
参见下面的"备选库"部分以获取示例
4。布局
其中一个挑战是在一个页面上布局6个图表（见第一张图片），并确保其在ipad上可见。有些图表在添加到像with.placeAt这样的页面时似乎无法显示，宁波大数据，有些则会立即显示。一个简单的解决方法似乎是首先将图表添加到面板中，然后再将其放在页面上。有时将高度改为像素vs%也很管用。
使用面板在页面上放置图表的示例。
从面板布局开始构建原型非常管用。我们在后面使用矩阵布局是更复杂的。
面板布局示例
var oPanel1=新闻ap.ui.commons.Panel（{width:"100%"，height:"100%"}）；
oPanel1.addContent（oChart）；
oPanel1.setTitle（new）sap.ui.core.Title（{text:"按地区划分的风险销售"}）；
oPanel1.placeAt（"oPanel1"）；
在将布局添加到页面之前，关键是将一些图表/元素添加到单元格中。
矩阵布局示例
var oLayout=newsap.ui.commons.布局.MatrixLayout（"布局"，{width:"100%"，columns:2}）；
var oCell=newsap.ui.commons.布局.MatrixLayoutCell（{id:'Cell-0-0'，lSpan:2}）；
oCell.addContent文件（vbar）；
oLayout.createRow文件（oCell）；
var oCell10=新sap.ui.commons.布局.MatrixLayoutCell（{id:'Cell-1-0'，colSpan:1}）；
oCell10.addContent（oTable）；
oLayout.createRow文件（oChart2，mycol2）；
oLayout.placeAt（"content"）；
将表格添加到矩阵布局单元格的结果。
这里是一个不同的jsbin游戏场图表和布局：
5. 数据聚合。
一旦我对图表和数据模型更熟悉了。我试着根据
的要求创建页面和图表。我花了一段时间才意识到，这些图表从来没有显示任何值的总和
例如，按地区销售，而是只显示该地区的最后一个客户。
例如，一个没有聚合数据值的图表和聚合数据值的图表形成了同一个服务。
自从问题解决以来，我花了一段时间才找到解决方案HANA xsodata服务缺少一个名为"aggregates always；"如果没有该参数
服务将不会聚合值。
这里是Hana Studio中具有正确参数的xsodata服务。
下面是一个Odata选择url，用于检查值的聚合：格式：？$parameter&$otherodataparameter
…/蓝宝石/opportunityforecast.xsodata/Opportunities/？$select=OPPORTUNITY\u VALUE，CUSTOMER\u DESC&$filter=startswith（CUSTOMER\u DESC，'A'）
HANA服务中没有聚合参数的结果
ABC赛车运动
1125
带参数返回ABC Motorsports
ABC公司赛车运动
6837050
另一个问题是，像在odata url和UI5中一样，我们必须定义/选择聚合的字段。
像：
var oDataset=newsap.viz.ui5软件.数据.flattedDataset（{
维度：[{
轴：1，
名称：'区域'，
值：'{REGION}'
}]，
度量：[{
名称：'值'，
值："{OPPORTUNITY\u AMOUNT}"
数据：{
路径："/Opportunities"，
参数：{选择：'CUSTOMER\u ID，REGION，CUSTOMER\u DESC，OPPORTUNITY\u AMOUNT'}
}）；
否则即使服务设置正确，数据也不会聚合。
这里是Jsbin代码示例：
6. 过滤和分类。
为了以同样的方式过滤和分类数据，您可以通过odata url参数
()您需要向数据集添加分类器和过滤器。
过滤器代码示例：()
数据：{
路径："/Opportunities"，
过滤器：新sap.ui.model模型.Filter（'版本'，sap.ui.model模型.过滤器操作器.EQ，'实际'，
分拣机：新sap.ui.model模型.Sorter（"REGION"，true）
参数：{select:'CUSTOMER\u ID，REGION，CUSTOMER\u DESC，OPPORTUNITY\u AMOUNT'}}）；
7。可选的图表库
如前所述，有很多其他的图表JavaScript库，你可以用它来代替makit或，也就是说，
D3是一个非常流行的，sdn上有ui5的例子，使用D3来呈现图表和仪表。
（SAPUI5中的仪表）
这里有一些其他的（代码）图表库的例子。
C3–？html、js、输出
高图表–#javascript，现场
谷歌图表-https://jsfiddle.net/api/post/library/pure/图中显示了我在所有示例中使用的odatahana服务的d3图表。你可以在这里找到上面图表的代码。？html，输出
8。将代码添加到Fiori启动板。
这里有一些关于如何将ui5应用程序添加到Fiori启动板的快速信息，非常有用。
注意：您可以使用se80或report/UI5/UI5\u REPOSITORY\u LOAD…将开发的代码上传为BSP页面信息在此
\u nw74/helpdata/en/91/f3ecc06f4d1014b6dd926db0e91070/frameset.htm
结论：
当然还有很多关于图表和ui5数据可视化的知识，但这会给你一个好的开始，让你专注于数据，以及图表的功能性，希望您能避免一些陷阱。
所有示例的代码都可以在jsbin中找到，github和随附的zip文件。
如果您有任何问题，请留下评论并告诉我，或者通过twitter@markusvankempen或电子邮件与我联系mvk@ca.ibm.com
干杯
马库斯
参考：
Github：https://github.com/markusvankempen/SAPUI5-Charts
这是一份很棒的文件。图表示例和示例代码很有帮助。
非常感谢Masayuki。
干杯。
很棒的文档。只需注意一点，D3.js并不完全是一个图表库，您可以使用它构建图表，但您将自己构建SVG。操作条的高度、颜色、实现动画，淘客查询，
所有其他库都使用d3.js创建SVG图表，甚至sap.viz公司.
嗨，乔
