如何将OData绑定到SAPUI5图( bind .viz.ui5.VizContainer)

Question

尝试连接图表的数据，但不会显示除了空图表。如何获得到javaScript视图的正确绑定，或者这段代码中哪里有错误？对于下面列出的代码片段，我遵循了链接 上的说明(步骤8:使用VizContainer的动态可视化)

sap.ui.jsview("zui5_flight.BookingGraph", {

        getControllerName : function() {
                  return null;  
        },

        createContent : function(oController) {
            var oModel = new sap.ui.model.json.JSONModel();
            oModel.loadData("/salesOrderService.xsjs");

       // A Dataset defines how the model data is mapped to the chart
            var oDataset = new sap.viz.ui5.data.FlattenedDataset({
                // a Bar Chart requires exactly one dimension (x-axis)
                dimensions : [ {
                    axis : 1, // must be one for the x-axis, 2 for y-axis
                    name : 'CONNID',
                    value : "{CONNID}"
                } ],
                // it can show multiple measures, each results in a new set of bars in a new color
                measures : [
                // measure 1
                {
                    name : 'PRICE_ECO', // 'name' is used as label in the Legend
                    value : '{PRICE_ECO}' // 'value' defines the binding for the displayed value 
                } ],
                // 'data' is used to bind the whole data collection that is to be displayed in the chart
                data : {
                    path : "/"
                }
            });

            // create a VizContainer
            var oVizContainer = new sap.viz.ui5.VizContainer({
                'uiConfig' : {
                    'layout' : 'vertical',
                    'enableMorphing' : true
                },
                'width': '100%',
                'height': '100%'
            });

            // attach the model to the chart and display it
            oVizContainer.setVizData(oDataset)
            oVizContainer.setModel(oModel);

            // set feeds
            var aobjCustomer = new sap.viz.ui5.controls.common.feeds.AnalysisObject({
           uid : "customer_id",
                name : "CONNID",
                type : "Dimension"
            });
            var aobjNetSales = new sap.viz.ui5.controls.common.feeds.AnalysisObject({
           uid : "netsales_id",
                name : "PRICE_ECO",
                type : "Measure"
            });
            var feedPrimaryValues = new sap.viz.ui5.controls.common.feeds.FeedItem({
         uid : "primaryValues",
                type : "Measure",
                values : [ aobjNetSales ]
            });
            var feedAxisLabels = new sap.viz.ui5.controls.common.feeds.FeedItem({
           uid : "axisLabels",
                type : "Dimension",
                values : [ aobjCustomer ]
            });

            oVizContainer.addFeed(feedPrimaryValues);
            oVizContainer.addFeed(feedAxisLabels);

            // attach event listener for feedschange
            oVizContainer.attachEvent('feedsChanged', function(e) {
                // You could add your own logic to handle feedsChanged to set new dataset to vizContainer.
                // Reset current data for demo purpose.
                oVizContainer.setVizData(new sap.viz.ui5.data.FlattenedDataset({
                    dimensions : [ {
                        axis : 1,
                        name : 'CONNID',
                        value : "{CONNID}"
                    } ], measures : [ {
                        name : 'PRICE_ECO',
                        value : '{PRICE_ECO}'
                    } ], data : {
                        path : "/"
                    }
                }));
                oVizContainer.setModel(oModel);
            });

            return oVizContainer;
}
});

Answer 1

如果您真的遵循了这个示例，那么您的loadData请求将在xsjs文件之前有一个服务/。尽管如此，您的问题可能是您的数据请求或数据绑定。

检查括号值(如{CONNID}和{PRICE_VALUE})是否是数据对象中的相同常量，以及路径(/)是否确实是数据对象的根(对于OData服务，它通常是/d/结果)。

在JSFiddle中提供一个数据示例或应用程序的完整示例，这样我们就可以看到它背后的完整代码。

你好，亨里克·马托斯

Answer 2

我已经更改了JSon文件的路径，并且它有现在变了。但数据尚未显示。为什么我不能理解呢？在路径中的斜杠之前，我没有使用的服务名称，因为在我的结构中没有这个名称的包，这里是我的当前代码：

sap.ui.jsview("zui5_flight.BookingGraph", {

        getControllerName : function() {
                  return "zui5_flight.BookingGraph";  
        },

        createContent : function(oController) {
            var oModel = new sap.ui.model.json.JSONModel();
            oModel.loadData("/gbi-student-009/Backup/WebContent/salesOrderService.xsjs/");

       // A Dataset defines how the model data is mapped to the chart
            var oDataset = new sap.viz.ui5.data.FlattenedDataset({
                // a Bar Chart requires exactly one dimension (x-axis)
                dimensions : [ {
                    axis : 1, // must be one for the x-axis, 2 for y-axis
                    name : 'CONNID',
                    value : "{CONNID}"
                } ],
                // it can show multiple measures, each results in a new set of bars in a new color
                measures : [
                // measure 1
                {
                    name : 'PRICE_ECO', // 'name' is used as label in the Legend
                    value : '{PRICE_ECO}' // 'value' defines the binding for the displayed value 
                } ],
                // 'data' is used to bind the whole data collection that is to be displayed in the chart
                data : {
                    path : "/"
                }
            });

            // create a VizContainer
            var oVizContainer = new sap.viz.ui5.VizContainer({
                'uiConfig' : {
                    'layout' : 'vertical',
                    'enableMorphing' : true
                },
                'width': '100%',
                'height': '100%'
            });

            // attach the model to the chart and display it
            oVizContainer.setVizData(oDataset)
            oVizContainer.setModel(oModel);

            // set feeds
            var aobjCustomer = new sap.viz.ui5.controls.common.feeds.AnalysisObject({
           uid : "customer_id",
                name : "CONNID",
                type : "Dimension"
            });
            var aobjNetSales = new sap.viz.ui5.controls.common.feeds.AnalysisObject({
           uid : "netsales_id",
                name : "PRICE_ECO",
                type : "Measure"
            });
            var feedPrimaryValues = new sap.viz.ui5.controls.common.feeds.FeedItem({
         uid : "primaryValues",
                type : "Measure",
                values : [ aobjNetSales ]
            });
            var feedAxisLabels = new sap.viz.ui5.controls.common.feeds.FeedItem({
           uid : "axisLabels",
                type : "Dimension",
                values : [ aobjCustomer ]
            });

            oVizContainer.addFeed(feedPrimaryValues);
            oVizContainer.addFeed(feedAxisLabels);

            // attach event listener for feedschange
            oVizContainer.attachEvent('feedsChanged', function(e) {
                // You could add your own logic to handle feedsChanged to set new dataset to vizContainer.
                // Reset current data for demo purpose.
                oVizContainer.setVizData(new sap.viz.ui5.data.FlattenedDataset({
                    dimensions : [ {
                        axis : 1,
                        name : 'CONNID',
                        value : "{CONNID}"
                    } ], measures : [ {
                        name : 'PRICE_ECO',
                        value : '{PRICE_ECO}'
                    } ], data : {
                        path : "/"
                    }
                }));
                oVizContainer.setModel(oModel);
                oVizContainer
            });

            return oVizContainer;
}
});

**这是我在同一个包中的JSon文件：

var select_all_sales_orders_query =
                    "SELECT TOP 100 CONNID, SUM(PRICE_ECO) AS PRICE_ECO, SUM(PRICE_BUS) AS PRICE_BUS " +
                    "FROM \"_SYS_BIC\".\"gbi-student-009.UI5App.View/CV_Sales\" "+
                    "GROUP BY CONNID";
function close(closables) {
          var closable;
          var i;
          for (i = 0; i < closables.length; i++) {
                    closable = closables[i];
                    if(closable) {
                              closable.close();
                    } 
          }
}
function getSalesOrders(){
          var salesOrdersList = [];
          var connection = $.db.getConnection();
          var statement = null;
          var resultSet = null;
          try{
                    statement = connection.prepareStatement(select_all_sales_orders_query);
                    resultSet = statement.executeQuery();
                    var salesOrder;

                    while (resultSet.next()) {
                              salesOrder = {};
                              salesOrder.seats_eco = resultSet.getString(1);
                              salesOrder.seats_bus = resultSet.getString(1);
                              salesOrder.price_eco = resultSet.getDouble(2);
                              salesOrder.price_bus = resultSet.getDouble(3);
                              salesOrdersList.push(salesOrder);
                    }
          } finally {
                    close([resultSet, statement, connection]);
          }
          return salesOrdersList;
}
function doGet() {
          try{
                    $.response.contentType = "application/json";
                    $.response.setBody(JSON.stringify(getSalesOrders()));
          }
          catch(err){
                    $.response.contentType = "text/plain";
                    $.response.setBody("Error while executing query: [" + err.message + "]");
                    $.response.returnCode = 200;
          }
}
doGet();

实际上，我想将一个ODataModel连接到这个图表(而不是JSon)，但这也不起作用。这里将显示表输出的相同数据。

  [1]: httsap.ui.jsview("zui5_flight.TestG", {

        getControllerName : function() {
                  return "zui5_flight.TestG";  
        },

        createContent : function(oController) {
            var oModel = new sap.ui.model.odata.ODataModel("/gbi-student-009/UI5App/WebContent/OData/ODataService.xsodata/CV_Sales", true);



       // A Dataset defines how the model data is mapped to the chart
            var oDataset = new sap.viz.ui5.data.FlattenedDataset({
                // a Bar Chart requires exactly one dimension (x-axis)
                dimensions : [ {
                    axis : 1, // must be one for the x-axis, 2 for y-axis
                    name : 'Customer',
                    value : "{CONNID}"
                } ],
                // it can show multiple measures, each results in a new set of bars in a new color
                measures : [
                // measure 1
                {
                    name : 'NetSales', // 'name' is used as label in the Legend
                    value : '{PRICE_ECO}' // 'value' defines the binding for the displayed value 
                } ],
                // 'data' is used to bind the whole data collection that is to be displayed in the chart
                data : {
                    path : "/"
                }
            });

            // create a VizContainer
            var oVizContainer = new sap.viz.ui5.VizContainer({
                'uiConfig' : {
                    'layout' : 'vertical',
                    'enableMorphing' : true
                },
                'width': '100%',
                'height': '100%'
            });

            // attach the model to the chart and display it
            oVizContainer.setVizData(oDataset)
            oVizContainer.setModel(oModel);

            // set feeds
            var aobjCustomer = new sap.viz.ui5.controls.common.feeds.AnalysisObject({
           uid : "customer_id",
                name : "Customer",
                type : "Dimension"
            });
            var aobjNetSales = new sap.viz.ui5.controls.common.feeds.AnalysisObject({
           uid : "netsales_id",
                name : "NetSales",
                type : "Measure"
            });
            var feedPrimaryValues = new sap.viz.ui5.controls.common.feeds.FeedItem({
         uid : "primaryValues",
                type : "Measure",
                values : [ aobjNetSales ]
            });
            var feedAxisLabels = new sap.viz.ui5.controls.common.feeds.FeedItem({
           uid : "axisLabels",
                type : "Dimension",
                values : [ aobjCustomer ]
            });

            oVizContainer.addFeed(feedPrimaryValues);
            oVizContainer.addFeed(feedAxisLabels);

            // attach event listener for feedschange
            oVizContainer.attachEvent('feedsChanged', function(e) {
                // You could add your own logic to handle feedsChanged to set new dataset to vizContainer.
                // Reset current data for demo purpose.
                oVizContainer.setVizData(new sap.viz.ui5.data.FlattenedDataset({
                    dimensions : [ {
                        axis : 1,
                        name : 'Customer',
                        value : "{CONNID}"
                    } ], measures : [ {
                        name : 'NetSales',
                        value : '{PRICE_ECO}'
                    } ], data : {
                        path : "/"
                    }
                }));
                oVizContainer.setModel(oModel);
            });

            return oVizContainer;
}
});