嘿，社区！

我使用SAPUI5框架图已经有一段时间了。今天我将分享一些关于VizFrame图表的提示和如何指导。

这篇文章假设您可以在WebIDE/Eclipse中设置一个SAPUI5项目。

测试用例：假设您拥有一辆冰淇淋卡车，并且您正在构建一个仪表板来查看不同口味的销售情况（我下次会举一个更好的例子）。

因此，啥叫人工智能，让我们开始…

1.选择图表类型

访问SAPUI5演示套件，大数据行业分析，选择适合您需求的图表类型。

https://sapui5.netweaver.ondemand.com/#/entity/sap.viz.ui5.controls.VizFrame

对于这个博客，我们将使用饼图（你可能厌倦了看到饼图的例子，但请和我一起讨论这个问题）。

2.始终使用饼图图表容器！链接

这是一个专门为保存图表而构建的控件，好评返现，提供额外但重要的功能，例如提供一个工具栏，具有缩放、全屏显示、切换图例、在图表类型之间切换和更改图表尺寸等通用功能。

因此，在您的视图中添加以下内容：

3。让我们决定要显示的数据。

我们将考虑以下类型的记录数组。

4。添加饼图。

在""视图中添加以下内容：

并在控制器中添加此内容：

提示：

当您要使用OData时，在控制器中动态设置FlattedDataSet的绑定，这将有助于避免OData调用为空。

输出：

5。外观上的小变化…

在饼图中显示"销售值"，而不是"百分比"将图例位置更改为左侧。给图表一个3D ishh（光泽）的外观

以上所有都可以通过更新vizFrame的vizProperties属性来实现：

在您的视图中更改vizProperties属性：

输出：

6。更新颜色口味

饼图中显示的颜色与冰淇淋口味完全无关。默认显示以下标准颜色

因此，您可以根据您的数据值覆盖并添加颜色，在本例中，请在\u setIceCreamModel函数中添加以下颜色

请注意，颜色中的颜色将按照记录的顺序绘制，i、 e.在我们的例子中，"蓝月亮"作为第一条记录出现，因此"#5bbae7"将按顺序为"蓝月亮"绘制，其余项目相同。

输出：

7。显示值的自定义格式化程序

显示值的格式化是必须的！

例如，在一个幸运的月份，你卖出了价值超过1356000英镑的冰淇淋（比如说黑电流）

输出会是这样：

所以我们不能按原样显示这个值，它的格式应该是135万或1.35米

为了实现这一点，手游返利，我们可以使用属性formatString。这里有一些标准格式，您可以探索：

https://sapui5.hana.ondemand.com/#/api/sap.viz.ui5.format.ChartFormatter.DefaultPattern

但是！我们可以创建自己的格式化程序，为此在控制器中添加以下函数，并在onInit（）方法中调用此函数。这将注册一个自定义格式化程序。

要使上述代码正常工作，请不要忘记在中添加ChartFormatter和格式化程序依赖项sap.ui.define同样的参考。

现在要看到这一点，大数据和数据库，你只需要更新你的万能财产"vizProperties"

现在：

整洁！正确的？

8. Popover

最后但并非最不重要的是vizframe Popover，在我们的例子中，我们显示的是格式化的值，但我们也想查看原始值，这里Popover来解救。

创建一个Popover并将其附加到vizframe。

还有，您可以使用setFormatString方法来决定popover显示的格式字符串。

输出：点击饼图将显示popover。

仅此而已！

另外，请查看Fiori设计指南：https://experience.sap.com/fiori-design-web/chart/

希望你喜欢这个帖子