UI5 - 如何调整堆叠条形图中条形的高度

我已经在UI5中开发了一个堆叠条形图。UI5 - 如何调整堆叠条形图中条形的高度

它在PC和Ipad's Portrait的方向工作正常。但是，当涉及到Ipad's landscape方向时，图表变得很小，并且它显示了一个滚动条来访问位于图表底部的酒吧。我不知道为什么堆积柱形图没有动态调整酒吧的高度（如图所示）

我的观点：

<f:SimpleForm editable="true" layout="ResponsiveGridLayout" 
id="OEEform" class="formTitleStyle" labelSpanL="6" 
labelSpanM="6" adjustLabelSpan="false" emptySpanL="0" 
emptySpanM="0" columnsL="2" columnsM="2"> 
<f:content> 

<Label id="idPerformance" visible="true" text="Performance"> 
    <layoutData> 
     <l:GridData span="L5 M5 S5" /> 
    </layoutData> 
</Label> 
<ProgressIndicator id="idPerformancePI" class="sapUiSmallMarginBottom" 
    percentValue="0" showValue="true" state="None" 
    displayValue="0%" width="100%" /> 

<Label id="idAvailability" visible="true" text="Availability"> 
    <layoutData> 
     <l:GridData span="L5 M5 S5" /> 
    </layoutData> 
</Label> 
<ProgressIndicator id="idAvailabilityPI" 
    class="sapUiSmallMarginBottom" percentValue="0" 
    displayValue="0%" showValue="true" state="None" width="100%" /> 

<core:Title /> 

<Label id="idQuality" visible="true" text="Quality"> 
    <layoutData> 
     <l:GridData span="L5 M5 S5" /> 
    </layoutData> 
</Label> 
<ProgressIndicator id="idQualityPI" class="sapUiSmallMarginBottom" 
    percentValue="0" displayValue="0%" showValue="true" 
    state="None" width="100%" /> 

<Label id="idOEE" visible="true" text="OEE"> 
    <layoutData> 
     <l:GridData span="L5 M5 S5" /> 
    </layoutData> 
</Label> 
<ProgressIndicator id="idOEEPI" class="sapUiSmallMarginBottom" 
    percentValue="0" displayValue="0%" showValue="true" 
    state="None" width="100%" /> 


</f:content> 
     </f:SimpleForm> 


    <viz:Popover id="idPopOver"></viz:Popover> 
    <viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}" 
     width='100%' vizType='stacked_bar'> 
     <viz:dataset> 
<viz.data:FlattenedDataset 
    data="{/Rowsets/Rowset/0/Row}"> 
    <viz.data:dimensions> 
     <viz.data:DimensionDefinition 
name="Title" value="{Title}" /> 
     <!-- <viz.data:DimensionDefinition name="Staco" value="{Staco}" 
/> --> 
     <viz.data:DimensionDefinition 
name="Status" value="{Status}" /> 
     <!-- <viz.data:DimensionDefinition name="Fat Percentage" 
value="{Fat Percentage}" /> --> 
    </viz.data:dimensions> 
    <viz.data:measures> 
     <viz.data:MeasureDefinition 
name="Hours" value="{Hours}" /> 
    </viz.data:measures> 
</viz.data:FlattenedDataset> 
     </viz:dataset> 
     <viz:feeds> 
<viz.feeds:FeedItem uid="valueAxis" 
    type="Measure" values="Hours" /> 
<viz.feeds:FeedItem uid="categoryAxis" 
    type="Dimension" values="Title" /> 
<viz.feeds:FeedItem uid="color" type="Dimension" 
    values="Status" /> 
<!-- <viz.feeds:FeedItem uid="color" type="Dimension" values="Fat 
    Percentage" /> 
<viz.feeds:FeedItem uid="waterfallType" 
    type="Dimension" values="Type" /> --> 
     </viz:feeds> 
    </viz:VizFrame>

现在只有一个地方的方式当方向是横向时，我需要明确地减少酒吧的高度。

我在控制器的代码中添加了下面的代码（请参阅评论），我将属性分配给图表，但不知怎的，它没有设置高度。

oVizFrame.setVizProperties({ 

    valueAxis : { 
     title : { 
      visible : true 
     } 
    }, 

    categoryAxis : { 
     title : { 
      visible : false 
     }, 
     label:{ 
      visible:false 
     } 
    }, 


    legend: { 
    title: { 
     visible: false 
    }, 
    label: { 
     text: { 
       positiveValue: "Hours" 
     } 
    } 
    }, 

    plotArea:{ 
    dataLabel:{ 
    renderer: function(oParam){ 

    //alert(oParam.dataPointWidth + " -- " + oParam.ctx["Status"]); 

    if(oParam.dataPointWidth > 300) 
    { 
     oParam.text = oParam.ctx["Status"] + " (" + oParam.val + ")"; 
    } 
// Below code is not setting the height of the bar 
    if (sap.ui.Device.orientation.landscape === true){ 
     oParam.dataPointHeight = 10; 
    } 
    }, 
    visible : true 
    }, 
    dataPointStyle:{ //Allows to set color,legend and data label based on rules defined. 
    'rules':[

我在做什么错？是否有任何其他方式来调整条形图中的酒吧高度？

来源

2017-04-20 Soham Shah

会发生什么，如果你尝试类似：

  oVizFrame.setVizProperties({ 
... 
          plotArea: { 
           dataPointSize: { 
             max: 400, 
             min: 5 
          }

请也看到了plotArea.dataPointSize.min相应的实况在

Stacked Bar Chart

和

Chart Property Reference/Overview

如果你有ma它们可能会缩小得太多而变得不可读。在这种情况下，滚动条可能仍然是必需的。

来源

2017-04-20 12:13:29

它的工作！万分感谢：） –

UI5 - 如何调整堆叠条形图中条形的高度

回答

相关问题