sapui5 Vizframe und IconTabBar

Question

Ich möchte eine sapui5-Ansicht mit Tab-View entwickeln. Auf der ersten Registerkarte müssen zwei Donut-Charts (sap.viz.ui5.controls) stehen. Für Tab-View verwende ich die IconTabBar. Ich kann die Diagramme ohne die IconTabBar anzeigen, aber wenn ich die Chart-Ansicht in der Tab-Ansicht implementiere, ist alles leer. Auch wenn ich die beiden Donut-Charts in ein HorizontalLayout setze. Hat jemand eine Idee?

freundlichen Grüßen Kirsten

Tab-View: 
<Page id="detail_Tab" title="{i18n>Title}" showNavButton="false" > 
     <IconTabBar> 
      <items> 
       <IconTabFilter text="Overview"> 
        <mvc:XMLView viewName="{...}.view.Detail_Overview"/> 
       </IconTabFilter> 

      </items> 
     </IconTabBar> 
    </Page> 

Detail_Overview:

<viz:VizFrame 
     id="idDonutChartPriority" 
     height="100%" 
     width="100%"></viz:VizFrame> 

Answer 1

Ich würde vermuten, dass Sie ein Problem mit dem height="100%" Eigenschaft Ihres VizFrame s haben. Versuchen Sie, sie auf eine px-Größe zu setzen. Sie können versuchen, dass here auf JSBin.

Die Höhe des IconTabBar ist zu seinem Inhalt angepasst. Wenn Ihr Inhalt eine Höhe von 100% hat, wird es in 100% von Null resultieren. Wenn Sie 100% verwenden möchten, können Sie versuchen, stretchContentHeight="true" auf IconTabBar zu setzen. Es determines whether the IconTabBar height is stretched to the maximum possible height of its parent container. As a prerequisite, the height of the parent container must be defined as a fixed value.

Answer 2

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:viz="sap.viz.ui5.controls" controllerName="view1"> 
<IconTabBar> 
      <items> 
       <IconTabFilter text="Overview"> 
        <viz:VizFrame 
        id="sample" 
        height="500px" 
        width="100%"></viz:VizFrame> 
       </IconTabFilter> 
      </items> 
     </IconTabBar> 
</mvc:view>