帶有XML視圖的JS圖表

Question

我目前正在研究一個SAPUI5應用程序，我希望在其中添加一個簡單的條形圖。 我想知道任何可以在我的XML視圖中使用的圖表庫。

我期待的圖表非常簡單。 PFA的屏幕截圖與可用數據。 Graph Image

- 問候 SAurabhaĴ

Answer 1

Working JS Fiddle

<core:View xmlns:core="sap.ui.core" xmlns:viz="sap.viz.ui5.controls" xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:viz.data="sap.viz.ui5.data" xmlns="sap.m" controllerName="my.own.controller"> 
    <App> 
     <Page title="SAPUI5 App"> 
     <viz:VizFrame xmlns:viz="sap.viz.ui5.controls" id="lineChartCard" uiConfig="{applicationSet:'fiori'}" vizType="column" width="100%"> 
      <viz:dataset> 
      <dataSet:FlattenedDataset xmlns:dataSet="sap.viz.ui5.data" data="{/SalesShare}"> 
       <dataSet:dimensions> 

       <dataSet:DimensionDefinition name="Date" value="{Date}"> 
       </dataSet:DimensionDefinition> 

       </dataSet:dimensions> 
       <dataSet:measures> 



       <dataSet:MeasureDefinition name="Price" value="{Price}"> 
       </dataSet:MeasureDefinition> 

       </dataSet:measures> 
      </dataSet:FlattenedDataset> 
      </viz:dataset> 
      <viz:feeds> 
      <feed:FeedItem xmlns:feed="sap.viz.ui5.controls.common.feeds" uid="valueAxis" type="Measure" values="Price" /> 
      <feed:FeedItem xmlns:feed="sap.viz.ui5.controls.common.feeds" uid="categoryAxis" type="Dimension" values="Date" /> 

      </viz:feeds> 
     </viz:VizFrame> 
     </Page> 
    </App> 
    </core:View> 

控制器：

sap.ui.controller("my.own.controller", { 
    onInit: function() { 
    var oData = { 
     "SalesShare": [{ 
     "Date": "2nd Jan", 
     "Price": "400" 
     }, { 
     "Date": "2nd Feb", 
     "Price": "275" 
     }, { 
     "Date": "4th May", 
     "Price": "356" 
     }, { 
     "Date": "6th June", 
     "Price": "310" 
     }] 
    }; 
    var oModel = new sap.ui.model.json.JSONModel(oData); 
    this.getView().setModel(oModel); 
    }, 
}); 
sap.ui.view({ 
    viewContent: document.scripts.myxml.innerText, 
    type: sap.ui.core.mvc.ViewType.XML 
}).placeAt("content"); 

Answer 2

您應該檢查演示。代碼可以在右上角看到。

https://sapui5.netweaver.ondemand.com/explored.html#/sample/sap.viz.sample.Bar/preview