Popover.fragment.xml 中的 Harvey Ball 微图

Question

我想在我的 popover.fragment 中获取 Harvey Ball Micro 图表，但它没有显示在我的浏览器中。此外，当我单击 Popover（单击约会事件）时，它什么也没显示。

是否可以在弹出窗口中放置微型图表？

请有人帮我解决我的问题。

Answer 1

的示例

查看：

<m:Page id="page" title="SmartHarveyBallMicroChart">
    <m:VBox>
        <m:Panel headerText="Neutral" class="sapUiSmallMarginBottom">
            <SmartHarveyBallMicroChart id="directSmartChartNeutral" entitySet="Products" />
            <m:HBox class="sapUiSmallMarginTop">
                <m:Label text="Title association:" design="Bold" />
                <m:Label id="title" />
            </m:HBox>
        </m:Panel>
        <m:Panel headerText="Positive" class="sapUiSmallMarginBottom">
            <SmartHarveyBallMicroChart id="directSmartChartPositive" entitySet="Products" enableAutoBinding="true" chartBindingPath="/Products('Keyboard')">
            </SmartHarveyBallMicroChart>
            <m:HBox class="sapUiSmallMarginTop">
                <m:Label text="Unit of Measure association:" design="Bold" />
                <m:Label id="unitOfMeasure" />
            </m:HBox>
        </m:Panel>
        <m:Panel headerText="Critical" class="sapUiSmallMarginBottom">
            <SmartHarveyBallMicroChart id="directSmartChartCritical" entitySet="Products" />
            <m:HBox class="sapUiSmallMarginTop">
                <m:Label text="Title association:" design="Bold" />
                <m:Label id="chartTitle" />
            </m:HBox>
        </m:Panel>
        <m:Panel headerText="Negative" class="sapUiSmallMarginBottom">
            <SmartHarveyBallMicroChart id="directSmartChartNegative" entitySet="Products">
            </SmartHarveyBallMicroChart>
            <m:HBox class="sapUiSmallMarginTop">
                <m:Label text="Description association:" design="Bold" />
                <m:Label id="chartDescription" />
            </m:HBox>
        </m:Panel>
    </m:VBox>
</m:Page>

控制器：

sap.ui.define([
"sap/ui/model/odata/v2/ODataModel", "sap/ui/core/util/MockServer"], function(ODataModel, MockServer) {
"use strict";
return sap.ui.controller("sap.ui.comp.sample.smartmicrochart.SmartHarveyBallMicroChart.exampleDirect.Page", {
    onInit: function() {
        this._initMockServer();

        var oDirectModel = new ODataModel("smartmicrochart.SmartHarveyBallMicroChart/", true);
        this.getView().setModel(oDirectModel);

        var oDirectSmartChartNeutral = this.getView().byId("directSmartChartNeutral");
        oDirectSmartChartNeutral.bindElement("/Products('PC')");
        var oFreeTextLabel = this.getView().byId("title");
        oDirectSmartChartNeutral.setChartTitle(oFreeTextLabel);
        oFreeTextLabel.bindElement("/Products('PC')");

        var oDirectSmartChartPositive = this.getView().byId("directSmartChartPositive");
        var oUnitOfMeasureLabel = this.getView().byId("unitOfMeasure");
        oDirectSmartChartPositive.setUnitOfMeasure(oUnitOfMeasureLabel);
        oUnitOfMeasureLabel.bindElement("/Products('Keyboard')");

        var oDirectSmartChartCritical = this.getView().byId("directSmartChartCritical");
        var oTitleLabel = this.getView().byId("chartTitle");
        oDirectSmartChartCritical.bindElement("/Products('Mouse')");
        oDirectSmartChartCritical.setChartTitle(oTitleLabel);
        oTitleLabel.bindElement("/Products('Mouse')");

        var oDirectSmartChartNegative = this.getView().byId("directSmartChartNegative");
        var oDescriptionLabel = this.getView().byId("chartDescription");
        oDirectSmartChartNegative.bindElement("/Products('Chair')");
        oDirectSmartChartNegative.setChartDescription(oDescriptionLabel);
        oDescriptionLabel.bindElement("/Products('Chair')");
    },

    onExit: function() {
        this._oMockServer.stop();
        this._oMockServer.destroy();
    },

    _initMockServer: function() {
        this._oMockServer = new MockServer({
            rootUri: "smartmicrochart.SmartHarveyBallMicroChart/"
        });

        this._oMockServer.simulate("test-resources/sap/ui/comp/demokit/sample/smartmicrochart/SmartHarveyBallMicroChart/exampleDirect/mockserver/metadata.xml", {
            sMockdataBaseUrl: "test-resources/sap/ui/comp/demokit/sample/smartmicrochart/SmartHarveyBallMicroChart/exampleDirect/mockserver"
        });

        this._oMockServer.start();
    }
});});

你可以看到完整的代码here and the UI here

Answer 2

根据我的分析

View.xml

<Button text="Show Harvey Ball micro chart" press="openHarveyBallMicroChart" />

Controller.js

openHarveyBallMicroChart: function(oEvent) {        
    if (!this._oPopover) {
        this._oPopover = sap.ui.xmlfragment("trialnderror/Popover", this);// create popover
        this.getView().addDependent(this._oPopover);
    }
    //Binding Code goes here...
    this._oPopover.openBy(oEvent.getSource());
},

Popover.fragmenet.xml

<core:FragmentDefinition xmlns="sap.m"  xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout" xmlns:mc="sap.suite.ui.microchart">
    <Popover title="Harvey Ball Micro Chart"  placement="Bottom" initialFocus="email">
        <l:VerticalLayout class="sapUiContentPadding" >
            <mc:HarveyBallMicroChart size="L" total="360" totalScale="Mrd" press="press">
                <mc:items>
                    <mc:HarveyBallMicroChartItem fraction="28" color="Good" fractionScale="Mrd"/>
                </mc:items>
            </mc:HarveyBallMicroChart>          
            <mc:HarveyBallMicroChart size="L" total="360" totalScale="Mrd" press="press">
                <mc:items>
                    <mc:HarveyBallMicroChartItem fraction="8" color="Good" fractionScale="Mrd"/>
                </mc:items>
            </mc:HarveyBallMicroChart>
            <mc:HarveyBallMicroChart size="M" total="100" totalScale="Mrd" press="press">
                <mc:items>
                    <mc:HarveyBallMicroChartItem fraction="63.5" color="Good" fractionScale="Mrd"/>
                </mc:items>
            </mc:HarveyBallMicroChart>
            <mc:HarveyBallMicroChart size="S" total="100" totalScale="Mrd" press="press">
                <mc:items>
                    <mc:HarveyBallMicroChartItem fraction="63.5" color="Good" fractionScale="Mrd"/>
                </mc:items>
            </mc:HarveyBallMicroChart>
            <mc:HarveyBallMicroChart size="XS" total="100" totalScale="Mrd" press="press">
                <mc:items>
                    <mc:HarveyBallMicroChartItem fraction="63.5" color="Good" fractionScale="Mrd"/>
                </mc:items>
            </mc:HarveyBallMicroChart>      
        </l:VerticalLayout>     
    </Popover>
</core:FragmentDefinition>

注意：请在提问时提供更多信息，例如您目前尝试过的内容、代码、屏幕截图。以便专家更好地理解您的问题。

Answer 3

<core:FragmentDefinition xmlns="sap.m"  xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout" xmlns:mc="sap.suite.ui.microchart" xmlns:mvc="sap.ui.core.mvc">
    <ResponsivePopover title="Projekt S4/HANA:"  placement="Bottom" initialFocus="email">
        <l:VerticalLayout class="sapUiContentPadding" >
            <mc:HarveyBallMicroChart size="L" total="80%" totalScale="Auslastung" color="Red" press="press">
                <mc:items>
                    <mc:HarveyBallMicroChartItem fraction="20%" color="Good" fractionScale="Verfügbarkeit"/>
                </mc:items>
            </mc:HarveyBallMicroChart>          
        </l:VerticalLayout>     
    </ResponsivePopover>
</core:FragmentDefinition>

Popover.fragment.xml 中的 Harvey Ball 微图

Harvey Ball micro chart in Popover.fragment.xml

charts

sapui5