问题描述
我试图在对象页面中使用Vizframe制作折线图.有人举个例子吗?我搜索了API和sdn，但只找到了带有Layout元素的示例，而不是带有Object Page Layout元素的示例.
因此，当我在简单的Layout元素(< layout>元素)中对其进行测试时，折线图可以正常工作.但是，当我尝试使用对象页面布局"元素时，该图表不显示，并且控制台中没有错误.
I am trying to make a line chart using Vizframe in an Object Page. Does anybody have an example how to do it? I searched the APIs and the sdn but find just samples with Layout element and not Object Page Layout element.
So when I test it within a simple Layout element (< layout > element) the line charts works fine. But when I try it with Object Page Layout elementt, the chart doesn't show and there is no errors in the console.
非常感谢
Haylee N.
我在这里加入了两种不同的观点:
I joined the two different views here:
带有Layout元素的View.xml(有效)
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core"
xmlns:u="sap.uxap" xmlns:layout="sap.ui.layout" xmlns="sap.m" xmlns:f="sap.f"
xmlns:t="sap.ui.table" xmlns:viz="sap.viz.ui5.controls" xmlns:viz.data="sap.viz.ui5.data"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:sample="test.controller.ChartsOverview"
xmlns:goals="test.view.goals" controllerName="test.controller.ChartsOverview"
height="100%">
<Page title="SAPUI5 App">
<layout:FixFlex id='chartFixFlex' minFlexSize="250">
<layout:fixContent>
<Panel id='settingsPanel' class="panelStyle" expandable="true"
expanded="true" headerText="Summary" width="auto">
<content>
<HBox class='settingsHBox'>
<VBox width="200px">
<Label text='Reports' design="Bold" class='settingsLabel'></Label>
</VBox>
</HBox>
</content>
</Panel>
</layout:fixContent>
<layout:flexContent>
<viz:Popover id="idPopOver"></viz:Popover>
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
height='50%' width="50%" vizType='timeseries_line'>
<viz:dataset>
<viz.data:FlattenedDataset data="{/milk}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Date"
value="{Date}" dataType="date" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Revenue"
value="{Revenue}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem uid="valueAxis" type="Measure"
values="Revenue" />
<viz.feeds:FeedItem uid="timeAxis" type="Dimension"
values="Date" />
</viz:feeds>
</viz:VizFrame>
</layout:flexContent>
</layout:FixFlex>
</Page>
</mvc:View>
带有对象页面布局"元素的View.xml(不起作用)
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core"
xmlns="sap.uxap" xmlns:layout="sap.ui.layout" xmlns:m="sap.m" xmlns:f="sap.f"
xmlns:t="sap.ui.table" xmlns:viz="sap.viz.ui5.controls" xmlns:viz.data="sap.viz.ui5.data"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:sample="test.controller.ChartsOverview"
xmlns:goals="test.view.goals" controllerName="test.controller.ChartsOverview"
height="100%">
<m:Page showHeader="true" title="{i18n>appTitle}" showFooter="true"
showNavButton="false">
<ObjectPageLayout id="ObjectPageLayout"
enableLazyLoading="false" subSectionLayout="TitleOnLeft"
showTitleInHeaderContent="true" showHeaderContent="true">
<headerTitle>
<ObjectPageHeader objectTitle="Quality Monitor"
objectSubtitle="Reports based on errors processed"
isObjectIconAlwaysVisible="false" isObjectTitleAlwaysVisible="false"
isObjectSubtitleAlwaysVisible="false" isActionAreaAlwaysVisible="true"
id="ObjectPageLayoutHeaderTitle">
<actions>
</actions>
</ObjectPageHeader>
</headerTitle>
<sections>
<ObjectPageSection title="Charts">
<subSections>
<ObjectPageSubSection>
<blocks>
<viz:Popover id="idPopOver"></viz:Popover>
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
height='50%' width="50%" vizType='timeseries_line'>
<viz:dataset>
<viz.data:FlattenedDataset data="{/milk}">
<viz.data:dimensions>
<viz.data:DimensionDefinition
name="Date" value="{Date}" dataType="date" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Revenue"
value="{Revenue}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem uid="valueAxis" type="Measure"
values="Revenue" />
<viz.feeds:FeedItem uid="timeAxis" type="Dimension"
values="Date" />
</viz:feeds>
</viz:VizFrame>
</blocks>
</ObjectPageSubSection>
</subSections>
</ObjectPageSection>
</sections>
</ObjectPageLayout>
</m:Page>
</mvc:View>
推荐答案
，某些控件使用自适应容器，这些容器可以调整高度以适合其内容.如果该内容使用高度的"100％"(最初为0)，则该内容有效地变为0px，并且这些控件最终将其高度调整为内容的0px高度.出于同样的原因，如果您使用固定高度而不是百分比，那么它实际上是有效的.
As pointed by people in this question some controls use adaptive containers that adapt height to fit their content. If that content uses "100%" of height (which is initially 0) the content efectively becomes 0px and those controls end up adapting their hight to 0px height of the content. For the same reason if you use fixed height instead of a percentage it actually works.
对我个人而言，仅出现此问题是因为我盲目地将VizFrame的示例代码复制到了IconTabBar容器中，而没有意识到所用容器的区别.
For me personally, this problem only occurred because I blindly copied sample code for VizFrame into IconTabBar container, without realizing the difference in containers used.
我的问题的解决方案:从VizFrame删除height="100%"属性，该属性不会强制高度，从而允许根据其内容(标题，实际图表)计算VizFrame的高度，图例等)，而不是将VizFrame放入其中的容器.
Solution to my problem: remove the height="100%" property from VizFrame, which will not force height and in turn will allow the height of VizFrame to be calculated based on its content (title, actual chart, legend and such), instead of container that VizFrame is placed into.
这篇关于折线图未显示在“对象页面"中-Vizframe-SAPUI5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！