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 - 如何調整堆疊條形圖中條形的高度

回答

相關問題