sapUi5

2017-05-02 12 views
0

私は私のデータsapUi5

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の意志はのための年のトランザクションを表しDual column chart

例えば貯蔵する。グッチは "年"以上。私はそれぞれの年の表をチャートの列に表示したい。したがって、店舗名gucciの場合、2016年の年間取引とそれぞれの列に表示される2017年の取引を表示する画像のような2つの列が存在します。私はあなたがSDKでこのデモを見てきました私は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 
        } 
       } 
      }, 
     }); 

答えて

0

から参照しています次のコードでやろうとしていますか? VizFrame

enter image description here