2017-04-20 12 views
0

UI5でスタックバーチャートを作成しました。UI5 - スタックバーチャートのバーの高さを変更する方法

PCIpad's Portraitの方向では問題なく動作しています。しかし、Ipad's landscapeオリエンテーションの場合、チャートは小さくなり、チャートの下部にあるバーにアクセスするためのスクロールバーが表示されます。積み上げ棒グラフが動的バーの高さを調整されていない理由私はわからない(図に示すように)

enter image description here

マイビュー:

<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':[ 

私は間違っていますか?棒グラフの棒の高さのサイズを変更する方法はありますか?あなたがしようとした場合、どうなります

答えて

1

のようなもの:

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

Stacked Bar Chart

Chart Property Reference/Overview

にもplotArea.dataPointSize.minのための対応ドキュメンタリーを見てください

あなたはmaそれはあまりにも縮小して読めなくなるかもしれません。 このような状況では、スクロールバーがまだ必要な場合があります。

+0

それは働いた!ありがとう、トン:) –

関連する問題