sapUi5

2017-05-02 2 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" 
        } 
       ] 
      }; 

에 대한 열 차트를 만들려고하고 그것을 좋아해야 여러 시리즈 열 차트를 생성하는 방법 비용 1의 cost2의 의지가를 위해 올해 트랜잭션을 나타내는 Dual column chart

상점 예. 구찌 "올해". 차트 열 위에 각 연도의 lable을 표시하고 싶습니다. 따라서 상점 이름 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