Javascript 如何在sapUi5中创建包含多个系列的柱状图

Javascript 如何在sapUi5中创建包含多个系列的柱状图,javascript,sapui5,Javascript,Sapui5,我正在尝试为我的数据创建柱状图 var oData = { Names:[ { store: "Gucci", yearT: "100", year: "2016" }, {

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

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在“年度”内的交易。我想在图表列上显示相应的年份标签。因此,门店名称gucci将有两列,如图所示,分别显示2016年和2017年的年度交易。我正试图通过以下代码来做,我是从这里引用的



你看过SDK中的这个演示了吗

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
                    }
                }
            },
        });