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':[
私は間違っていますか?棒グラフの棒の高さのサイズを変更する方法はありますか?あなたがしようとした場合、どうなります
それは働いた!ありがとう、トン:) –