javascript - 带有 XML 视图的 JS 图表

Question

我目前正在开发一个 SAPUI5 应用程序，我希望在其中添加一个简单的条形图。我想知道可以在我的 XML 视图中使用的任何图表库。

我期待的图表非常简单。PFA 带有可用数据的屏幕截图。 图形图像

-- 问候 SAurabha J

Answer 1

工作 JS 小提琴

<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");