sapui5 Vizframe和IconTabBar

Question

我想用Tab-View开发一个sapui5-view。在第一个标签上必须有两个圆环图（sap.viz.ui5.controls）。对于Tab-View我正在使用IconTabBar。 我可以在没有IconTabBar的情况下显示图表，但是当我在选项卡视图中实现图表视图时，everthing是空的。 当我把两个圆环图放在Horizo​​ntalLayout中时。 有人有想法吗？

亲切的问候 姬

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

我猜您的height="100%"的{​​{1}}属性存在问题。尝试将它们设置为px大小。您可以在JSBin上尝试here。

VizFrame的高度适合其内容。如果您的内容的高度为100％，则会导致100％为零。

如果您想使用100％，可以尝试在IconTabBar上设置stretchContentHeight="true"。它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>

Answer 3

我要猜测一下，您犯了与我相同的错误，并且盲目地复制了示例代码，而没有意识到某些属性应该与layout元素一起使用。

除非您为VizFrame使用另一个容器，否则只需从VizFrame中删除height="100%"属性，它将自动适应。