UI5 - 如何调整堆积条形图中条形的高度答案

【问题标题】：UI5 - How to resize the height of Bars in Stacked Bar ChartUI5 - 如何调整堆积条形图中条形的高度
【发布时间】：2017-04-20 04:49:20
【问题描述】：

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

我做错了什么？有没有其他方法可以调整条形图中条形的高度？

【问题讨论】：

标签： javascript charts bar-chart sapui5

【解决方案1】：

如果您尝试以下操作会发生什么：

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

另请参阅

中 plotArea.dataPointSize.min 的相应文档

Stacked Bar Chart

和

Chart Property Reference / Overview

如果您有很多条，它们可能会缩小太多而变得不可读。在这种情况下，可能仍然需要滚动条。

【讨论】：