笔者已经写过一篇详细的文章介绍 SAP UI5 Smart Chart 的使用方法:
- SAP UI5 应用开发教程之一百五十三 - 使用 SAP UI5 Smart Chart 控件轻松绘制十数种不同类型的专业图表
本文泛泛地介绍 Smart Chart 提供的一些其他功能。
工具栏右侧的按钮可用于选择图表类型:
跳转到按钮旁边的两个按钮可用于 drill up 和 drill down. 使用此功能,可以在图表中显示更详细的信息:
如果我们将 showDetailsButton 和 showDrillBreadcrumbs 属性设置为 true,我们还可以使用另一种 drill down 功能:显示一个标记为 drill down 的按钮。 如果在图表中选择了一个列,此按钮将变为“详细信息”按钮。 当再次单击此按钮时,将出现一个弹出窗口,其中包含所选列的详细信息。
当进一步 drill down 时,可以在左侧看到 drill down 路径的 breadcrumb 路径,也可以使用它在图表中进行 drill up 操作。
工具栏中此旁边的两个按钮用于放大或缩小。 这将帮助使用者更清楚地了解特定实体。工具栏中的下一个按钮是打开图表个性化对话框的设置图标:
我们看到一个新控件已添加到 view.xml 中。 在 SmartChart 控件中,我们引用将在 metadata.xml 中看到的实体类型。 通过添加到 SmartChart 的 semanticObjectController 聚合的 SemanticObjectController,我们可以为特定实体启用链接数据的显示。 我们还设置了 enableAutoBinding="true"
,这样可以自动执行查询,从而在加载 SmartChart 控件后立即显示结果。 我们设置 useVariantManagement=”true” 和 persistencyKey=”SmartChart_Explored” 以启用视图管理。 我们还设置了 useChartPersonalisation=”true”,以启用图表个性化。
代码如下:
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
controllerName="sap.ui.demo.smartControls.SmartChart" xmlns:sl="sap.ui.comp.navpopover"
xmlns:smartChart="sap.ui.comp.smartchart">
<smartChart:SmartChart enableAutoBinding="true"
entitySet="Products" useVariantManagement="true"
persistencyKey="SmartChart_Explored" useChartPersonalisation="true"
header="Products">
<smartChart:semanticObjectController>
<sl:SemanticObjectController
navigationTargetsObtained="onNavigationTargetsObtained" navigate="onNavigate" />
</smartChart:semanticObjectController>
</smartChart:SmartChart>
</mvc:View>