如何在sapUi5中创建具有多个系列的柱形图

Question

我正在尝试为我的数据创建柱形图

var oData = {
                Names:[
                    {
                        store: "Gucci",
                        yearT: "100",
                        year: "2016"
                    },
                    {
                        store: "Gucci",
                        yearT: "200",
                        year: "2017"
                    },
                    {
                        store: "Jocky",
                        yearT: "300",
                        year: "2016"
                    },
                    {
                        store: "Jocky",
                        yearT: "400",
                        year: "2017"
                    }
                ]   
            };

它应该是

其中cost1 cost2将代表商店的年度交易，例如。 Gucci超过了＆＃34;年＆＃34;。我希望各自的年份标签显示在图表列上。因此，对于商店名称gucci，将有2列，如图像中所示，将显示2016年和2017年在各自列上显示的年度交易。我试着按照this link

中提到的代码进行操作

onInit: function() {
        var oData = {
                Names:[
                    {
                        store: "Gucci",
                        yearT: "100",
                        year: "2016"
                    },
                    {
                        store: "Gucci",
                        yearT: "200",
                        year: "2017"
                    },
                    {
                        store: "Jocky",
                        yearT: "300",
                        year: "2016"
                    },
                    {
                        store: "Jocky",
                        yearT: "400",
                        year: "2017"
                    }
                ]   
            };

            var oModel = sap.ui.model.json.JSONModel();

            oModel.setData(oData);

            sap.ui.getCore().setModel(oModel);


            debugger
            var oVizFrame= sap.ui.getCore().byId("bottomVizFrame");
//          this._updateBottomFrame(oVizFrame);


            var oDataset = new sap.viz.ui5.data.FlattenedDataset({
                dimensions:[{
                    name:'Store',
                    value:'{store}'
                }],
                measures: [
                    {
                        name:'Year Value',
                        value:'{yearT}'
                    },
                    {
                        name:'Year',
                        value:'{year}'
                    }
                ],
                data:{
                    path:"/Names"
                }
            });

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

            var oFeedXAxis1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
                'uid': "primaryValues",
                'type':"Measure",
                'values':["Year Value"]
            });
            var oFeedXAxis2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
                'uid': "primaryValues1",
                'type':"Measure",
                'values':["Year"]
            });
            var oFeedYAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
                'uid':"axisLabels",
                'type':"Dimension",
                'values':["Store"]  
            });

            oVizFrame.addFeed(oFeedXAxis1);
            oVizFrame.addFeed(oFeedXAxis2);
            oVizFrame.addFeed(oFeedYAxis);

    },

createContent : function(oController) {
        /* Viz Frame Charts */



        var oVizFrame = new sap.viz.ui5.controls.VizFrame({
            id : "bottomVizFrame",
            'uiConfig' : {
                'applicationSet' : 'fiori'
            },
            'vizType': 'dual_bar',
            'vizProperties' : {
                title : {
                    visible : true,
                },
                valueAxis : {
                    title : {
                        visible : true
                    }
                },
                categoryAxis : {
                    title : {
                        visible : true
                    }
                }
            },
        });

Answer 1

您是否在SDK中查看了此演示？ VizFrame