棒グラフで複数の寸法を取得する方法 - SAPUI5 VizFrame

Question

SAPUI5が新しく、VizFrameを使用して棒グラフで複数の寸法を取得しようとしています。私は下の画像のように表示されるグラフ必要があります。

私codeを確認してください。

Answer 1

おかげで以下のようにデータのJSONを更新しました!!私はsetVizProperties> plotArea> dataPointStyle> rulesを使って作成しました。これは更新されたlinkです。

Answer 2

棒グラフを検索すると、金額と日数が表示されます。ここで

は、私は以下のように_setupChart方法を更新しましたworking link.

です。

_setupChart: function() { 
    var oVizFrame = this.getView().byId("idVizFrame"); 
    oVizFrame.setModel(new JSONModel('./data.json')); 
    var oDataset = new sap.viz.ui5.data.FlattenedDataset({ 
     dimensions: [{ 
      name: "Days", 
      value: "{Days}" 
     }], 
     measures: [{ 
      name: "Amount", 
      value: "{Amount}" 
     }], 
     data: { 
      path: "/dueDays" 
     } 
    }); 
    oVizFrame.setDataset(oDataset); 
    oVizFrame.setVizType('bar'); 
    var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({ 
     "uid": "valueAxis", 
     "type": "Measure", 
     "values": ["Amount"] 
    }); 
    var feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({ 
     "uid": "categoryAxis", 
     "type": "Dimension", 
     "values": ["Days"] 
    }); 
    oVizFrame.addFeed(feedValueAxis); 
    oVizFrame.addFeed(feedCategoryAxis); 
} 

そしてまた、私はあなたの仕事&時間

{ 
    "dueDays": [{ 
     "Days": "Current", 
     "Amount": "44334.00" 
     }, {   
     "Days": "1 to 30", 
     "Amount": "53454.00" 
     }, {   
     "Days": "31 to 60", 
     "Amount": "34443.65" 
     }, {   
     "Days": "61 to 90", 
     "Amount": "65554.43" 
     }, {   
     "Days": "91 to 120", 
     "Amount": "43524.00" 
     },{   
     "Days": "121 to 150", 
     "Amount": "54554.00" 
     }, {   
     "Days": "151 to 180", 
     "Amount": "43324.00" 
     }, {   
     "Days": "Above 180", 
     "Amount": "54355" 
    }] 
}