SAPUI5 VizFrame向左旋转90°（水平而不是垂直）

Question

我使用的是VizFrame，是否可以将图形/图表向左或向右旋转90°，表示水平对齐而不是垂直对齐？

    var chartPopover = new sap.viz.ui5.controls.Popover({});

    var oModel = new sap.ui.model.json.JSONModel({
        'businessData' : [
            {
                "Country" : "China",
                "Profit" : 100,
                "Forcast" : 200,
                "Target" : 20,
                "Revenue" : 20,
                "Revenue2" : 20,
                "Revenue3" : 512
            }, {
                "Country" : "Japan",
                "Profit" : 159,
                "Forcast" : 140,
                "Target" : 150,
                "Revenue" : 30,
                "Revenue2" : 100,
                "Revenue3" : 303
            }, {
                "Country" : "India",
                "Profit" : 129,
                "Forcast" : 120,
                "Target" : 100,
                "Revenue" : 200,
                "Revenue2" : 222,
                "Revenue3" : 263
            }, {
                "Country" : "France",
                "Profit" : 58,
                "Forcast" : 60,
                "Target" : 80,
                "Revenue" : 116,
                "Revenue2" : 152,
                "Revenue3" : 113
            }, {
                "Country" : "Austrilia",
                "Profit" : 149,
                "Forcast" : 120,
                "Target" : 150,
                "Revenue" : 249,
                "Revenue2" : 292,
                "Revenue3" : 443
            }, {
                "Country" : "Sweden",
                "Profit" : 49,
                "Forcast" : 60,
                "Target" : 55,
                "Revenue" : 1449,
                "Revenue2" : 242,
                "Revenue3" : 243
            }
        ]
    });

    var oDataset = new sap.viz.ui5.data.FlattenedDataset({
        'dimensions' : [
            {
                name : 'Country',
                value : "{Country}"
            }
        ],
        measures : [
            {
                name : 'Profit',
                value : '{Profit}'
            }, {
                name : 'Target',
                value : '{Target}'
            }, {
                name : "Forcast",
                value : "{Forcast}"
            }, {
                name : "Revenue",
                value : "{Revenue}"
            }, {
                name : 'Revenue2',
                value : '{Revenue2}'
            }, {
                name : "Revenue3",
                value : "{Revenue3}"
            }
        ],
        'data' : {
            'path' : "/businessData"
        }
    });

    var oVizFrame = new sap.viz.ui5.controls.VizFrame("vizFrame", {
        'uiConfig' : {
            'applicationSet' : 'fiori'
        },
        'vizType' : 'bullet'
    });

    oVizFrame.setVizProperties({
        plotArea : {
            colorPalette : [
                'sapUiChartPaletteSemanticNeutral'
            ],
            gap : {
                visible : true
            }
        },

        legend : {
            title : {
                visible : false
            }
        },

        title : {
            visible : true,
            text : 'Bullet (with gap enabled)'
        }
    });

    oVizFrame.setDataset(oDataset);
    oVizFrame.setModel(oModel);

    var feedPrimaryValues = new sap.viz.ui5.controls.common.feeds.FeedItem({
        'uid' : "primaryValues",
        'type' : "Measure",
        'values' : [
            "Profit"
        ]
    }), feedAxisLabels = new sap.viz.ui5.controls.common.feeds.FeedItem({
        'uid' : "axisLabels",
        'type' : "Dimension",
        'values' : [
            "Country"
        ]
    }), feedTargetValues = new sap.viz.ui5.controls.common.feeds.FeedItem({
        'uid' : "targetValues",
        'type' : "Measure",
        'values' : [
            "Target"
        ]
    });

    oVizFrame.addFeed(feedPrimaryValues);
    oVizFrame.addFeed(feedAxisLabels);
    oVizFrame.addFeed(feedTargetValues);

    oVizFrame.attachSelectData(function(event) {
        var data = event.getParameter('data');
        for ( var i = 0; i < data.length; i++) {
            console.log(oDataset.findContext(data[i].data))
        }
    });

    var chartPopover = new sap.viz.ui5.controls.Popover({});
    chartPopover.connect(oVizFrame.getVizUid());

我已经尝试过：

var oVizFrame = sap.ui.getCore().byId("vizFrame");

var properties = { 
        'direction' : 'vertical', // also horizontal
     };

oVizFrame.vizUpdate({ 
     'properties' : properties, 
 }); 

但没有结果 - 任何帮助表示赞赏！

顺便说一下，是的，我可以使用旋转CSS，但我不想因为它的某种“黑客”而且我需要一个没有DOM注入的稳定图表..谢谢。

谢谢，zY

Answer 1

我不确定你是否还需要帮助，但是你应该改变图表类型＆＃34; bullet＆＃34; to＆＃34; vertical_bullet＆＃34;在定义图表时，不管怎么说：

new sap.viz.ui5.controls.VizFrame({
   ...
   vizType : "vertical_bullet",
   ...
})

哪个应该做的工作。 如果你想在飞行中做，那么只需调用

   oVizFrame.setVizType("vertical_bullet");

功能

最诚挚的问候， 暗