无效的数据绑定SAP UI5 BAR CHARTVIZ图表

Question

我试图在选择屏幕上点击Go按钮显示条形图。

我收到无效的数据绑定代替VIZ图表。

我附上了我收到的错误消息。我也附加了我的XML视图及其控制器逻辑。

＆＃13;

＆＃13;

sap.ui.controller("znwpm_charts_dash.Charts", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf znwpm_charts_dash.Charts
*/
	onInit: function() {
		var oVizFrame = this.getView().byId("idVizFrame");
		jQuery.sap.require("sap.ui.model.resource.ResourceModel");
		var oResourceModel = new sap.ui.model.resource.ResourceModel({
			bundleName :"znwpm_charts_dash/i18n/i18n",
			async :true
		});
		
		 var oViewInternalModel = this.getView().getModel('viewInternalModel');
		 if(!oViewInternalModel){
			 oViewInternalModel =  new sap.ui.model.json.JSONModel();	
				oViewInternalModel.setProperty("/filters", []);
			    this.getView().setModel(oViewInternalModel, 'viewInternalModel')};		

		sap.ui.getCore().setModel(oResourceModel , "i18n");
//		
		jQuery.sap.require("sap.ui.model.Filter" );
		if(!oVizFrame){
			
		}else{
			
		oVizFrame.setVisible(false);	
		oVizFrame.setVizProperties({
			title:{
				text : "NWPM"
			}
			});			}	
	},
	
	
	onSearch:function(evt){

		this.aFilters = [];
		var button = evt.getSource();
		var eDock = sap.ui.core.Popup.Dock;
		  
		jQuery.sap.require("sap.m.MessageBox");
		var startDate = this.getView().byId("startDateId").getValue();
		
		if(!startDate){
			sap.m.MessageToast.show("Start Date is required Field" ,{
			duration:4000,
			width :"25em",
			my: eDock.CenterCenter,
			at: eDock.CenterCenter,
			of: window,
			offset:"20"
			
		}) 	;
			
		}else{
		
			var endDate = this.getView().byId("endDateId").getValue();
			
			if(!endDate){
				sap.m.MessageToast.show("End Date is required Field" ,{
				duration:4000,
				width :"25em",
				my: eDock.CenterCenter,
				at: eDock.CenterCenter,
				of: window,
				offset:"20"
				
			}) 	;			
			
			
		}else{
			
			this.__applyFilters();				
			
			
		};
			
		};
			
	},
	
	__applyFilters:function(){
		var oView = this.getView();
		var filterModel = this.getView().getModel('viewInternalModel').getProperty("/filters");
		this.__setDefaultFilters();
		this.__oDataCall();
	},	
	

	
	__setDefaultFilters:function(){
		 this._filterSetTemp('DateFrom', this.getView().byId("startDateId").getValue());
		 this._filterSetTemp('DateTo', this.getView().byId("endDateId").getValue());
	},
	
	_filterSetTemp:function(sPropertyName, oInputValue){
	
		if(!this.aFilters){		
			this.aFilters = [];
			var aFilters = [];	
		}			
		var oViewInternalModel = this.getView().getModel('viewInternalModel');
		var aFilter = oViewInternalModel.getProperty("/filters");
		aFilter[sPropertyName] = oInputValue;
		oViewInternalModel.refresh();			
		this.aFilters.push( new sap.ui.model.Filter(sPropertyName, sap.ui.model.FilterOperator.EQ, oInputValue ) );
	},
	
	__oDataCall:function(){
		var oVizFrame = this.getView().byId("idVizFrame");
		var sUrl = "/sap/opu/odata/sap/ZIMM_INTERFACE_DASH_SRV";		
		var oDataModel = new sap.ui.model.odata.v2.ODataModel(sUrl ,true);	
		var oJsonModel = new sap.ui.model.json.JSONModel();			
		oItemsFilters = new sap.ui.model.Filter(this.aFilters, true);       
		var oView = this.getView();			
		oBusy = sap.ui.getCore().byId("busyID");
		if(!oBusy){
			var oBusy = new sap.m.BusyDialog("busyID",{
				text :"Fetching Data"	
		});
		}	
		
		oBusy.open();
		
        oDataModel.read("/ChartsSet",{
        	 filters:[oItemsFilters], 
            success:function(oData,response){
            	debugger;
                  oJsonModel.setData(oData);
                  oVizFrame.setModel(oJsonModel);  
                  oVizFrame.setVisible(true);
                  oView.setModel(oJsonModel );
                  sap.ui.getCore().setModel(oJsonModel);
                  
                  oBusy.close();
                  
            },
            error:function(err){
            	oBusy.close();
            }
     });
        
	},	
	
	selectData:function(evt){
		debugger;
		var onClick = evt.getParameters('data').data[0].data["Functional Area"];
		var oApp = sap.ui.getCore().byId("idApp");
		oApp.to("idTable");
	},	

/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf znwpm_charts_dash.Charts
*/
//	onBeforeRendering: function() {
//
//	},

/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf znwpm_charts_dash.Charts
*/
//	onAfterRendering: function() {
//
//	},

/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf znwpm_charts_dash.Charts
*/
//	onExit: function() {
//
//	}

});

＆＃13;

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m ,sap.viz"
				data-sap-ui-xx-bindingSyntax="complex"
				ata-sap-ui-preload="async"
				data-sap-ui-theme="sap_bluecrystal">
		</script>
		<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

		<script>
				sap.ui.localResources("znwpm_charts_dash");
				var app = new sap.m.App("idApp",{initialPage:"idCharts1"});
				var page = sap.ui.view({id:"idCharts1", viewName:"znwpm_charts_dash.Charts", type:sap.ui.core.mvc.ViewType.XML});
				app.addPage(page);
				
				var page2 = sap.ui.view({id:"idTable", viewName:"znwpm_charts_dash.Table", type:sap.ui.core.mvc.ViewType.XML});
				app.addPage(page2);
				
				app.placeAt("content");
		</script>

	</head>
	<body class="sapUiBody" role="application">
	
		<div id="content"></div>
	</body>
</html>

＆＃13;

＆＃13;

＆＃13;