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