乐趣区

关于前端:SAP-UI5-Smart-Chart-功能介绍

jiezi

笔者曾经写过一篇具体的文章介绍 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>
退出移动版