SAP UI5 Smart Chart 功能介绍

笔者已经写过一篇详细的文章介绍 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>