你好Sapui5开发者, 今天我进入了一个情况,我有5个图表来显示每种不同的风格,并使用不同的数据,所以我想在我的页面中多次使用viz框架我想写一个自定义控件,它采用grapghtype,FlattenedDat
今天我进入了一个情况,我有5个图表来显示每种不同的风格,并使用不同的数据,所以我想在我的页面中多次使用viz框架我想写一个自定义控件,它采用grapghtype,FlattenedDataset数据,DimensionDefinition值,MeasureDefinition名称值,Feed项列表.
一般代码如下
<viz:VizFrame id="idVizFrame"
uiConfig="{applicationSet:'fiori'}"
height='100%'
width="100%"
vizType='donut'>
<viz:dataset>
<viz.data:FlattenedDataset data="{/milk}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Store Name"
value="{Store Name}" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Revenue"
value="{Revenue}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem uid="size"
type="Measure"
values="Revenue" />
<viz.feeds:FeedItem uid="color"
type="Dimension"
values="Store Name" />
</viz:feeds>
</viz:VizFrame>
我希望它像
<chart frameType="donut"
flattenedData="{/milk}"
dimensionDefinationData="{Store Name}"
measureDefinationData="{Revenue}" />
那么应该呈现一个圆环图.
这是我试过的
shadowChart.js：
sap.ui.define([
"sap/ui/core/Control",
"sap/viz/ui5/controls/VizFrame",
"sap/viz/ui5/data/FlattenedDataset",
"sap/viz/ui5/controls/common/feeds/FeedItem"
], function(Control, gViz, gData, gFeeds) {
"use strict";
return Control.extend("NWS.control.shadowCharts", {
"metadata": {
"properties": {
"value": {
"type": "float",
"defaultValue": 0
},
"frameType": {
"type": "string",
"defaultValue": "bar"
},
"flattenedData": {
"type": "object",
"defaultValue": ""
},
"dimensionDefinationData": {
"type": "string",
"defaultValue": ""
},
"measureDefinationData": {
"type": "string",
"defaultValue": ""
},
"height": {
"type": "string",
"defaultValue": "90%"
},
"width": {
"type": "string",
"defaultValue": "90%"
}
},
"aggregations": {
"_vizFrames": {
"type": "sap.viz.ui5.controls.VizFrame",
"multiple": false,
"visibility": "hidden"
}
}
},
init: function() {
var oDataSet = new sap.viz.ui5.data.FlattenedDataset({
"data": {
"path": this.getFlattenedData()
},
"dimensions": [{
"name": "dimensionNameHere",
"value": this.getDimensionDefinationData()
}],
"measures": [{
"name": "measureNameHere",
"value": this.getMeasureDefinationData()
}]
});
var feedItem1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": "ValueAxis",
"type": "Measure",
"values": ["measureNameHere"]
});
var feedItem2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": "categoryAxis",
"type": "Dimension",
"values": ["dimensionNameHere"]
});
var vizFrame = new sap.viz.ui5.controls.VizFrame({
"vizType": this.getFrameType(),
"dataset": oDataSet,
"feeds": [feedItem1, feedItem2],
"iConfig" : "{applicationSet:'fiori'}",
"selectData": this._dataSelect.bind(this)
})
this.setAggregation("_vizFrames", vizFrame);
},
_dataSelect: function(oEvent) {
},
renderer: function(oRM, oControl) {
oRM.write("<div");
oRM.writeControlData(oControl);
oRM.addClass("customVizFrame");
oRM.writeClasses();
oRM.write(">");
oRM.renderControl(oControl.getAggregation("_vizFrames"));
oRM.write("</div>");
}
});
});
在登录view.xml中
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="view.Login" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:cViz="NWS.control">
<Page title="{i18n>Title}" >
<content>
<VBox class="sapUiSmallMargin">
<cViz:shadowCharts frameType="donut"
flattenedData="{gDataModel>/milk}"
dimensionDefinationData="{Store Name}"
measureDefinationData="{Revenue}" />
</VBox>
</content>
</Page>
</mvc:View>
调试时的错误(在init函数中)是传递绑定数据..正如我所知
this.getFrameType() as "bar" but not "donut",this.getFlattenedData() as ""
可能它与属性类型有关.
请帮助我满足要求
我在朋友的帮助下想出了这个问题.所以这里的问题是我们无法在init函数中获取属性值,所以我将代码转移到渲染器函数.
chartController.js
sap.ui.define([
"sap/ui/core/Control",
"sap/viz/ui5/controls/VizFrame",
"sap/viz/ui5/data/FlattenedDataset",
"sap/viz/ui5/controls/common/feeds/FeedItem"], function(Control, gViz, gData, gFeeds) {
"use strict";
return Control.extend("NWS.control.shadowCharts", {
"metadata": {
"properties": {
"value": {
"type": "float"
},
"frameType": {
"type": "string"
},
"flattenedData": {
"type": "string"
},
"dimensionDefinationData": {
"type": "string"
},
"measureDefinationData": {
"type": "string"
},
"height": {
"type": "string"
},
"width": {
"type": "string"
},
"press":{
"type":"string"
}
},
"aggregations": {
"_vizFrames": {
"type": "sap.viz.ui5.controls.VizFrame",
"multiple": false,
"visibility": "hidden"
}
},
"events":{
press:{}
}
},
init: function() {
this.getControlInstance=this;
},
_dataSelect: function(oEvent) {
this.fireEvent("press");
},
renderer: function(oRM, oControl) {
var oDataSet = new sap.viz.ui5.data.FlattenedDataset({
"data": {
"path": oControl.getFlattenedData()
},
"dimensions": [{
"name": oControl.getDimensionDefinationData(),
"value": "{"+oControl.getDimensionDefinationData()+"}"
}],
"measures": [{
"name": oControl.getMeasureDefinationData(),
"value": "{"+oControl.getMeasureDefinationData()+"}"
}]
});
var gType=oControl.getFrameType();
var measureUid="";
var dimesionUid="";
switch(gType){
case "donut":measureUid="size";dimesionUid="color";break;
case "bar":measureUid="valueAxis";dimesionUid="categoryAxis";break;
default:throw "error beacause of unknown graph type"
}
var feedItem1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": measureUid,
"type": "Measure",
"values": [oControl.getMeasureDefinationData()]
});
var feedItem2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": dimesionUid,
"type": "Dimension",
"values": [oControl.getDimensionDefinationData()]
});
var vizFrame = new sap.viz.ui5.controls.VizFrame({
"vizType": oControl.getFrameType(),
"dataset": oDataSet,
"feeds": [feedItem1, feedItem2],
"iConfig": "{applicationSet:'fiori'}",
"selectData": oControl._dataSelect.bind(oControl.getControlInstance)
})
vizFrame.setVizProperties({
title: {
visible: false,
text: 'Statastics'
}
});
oControl.setAggregation("_vizFrames", vizFrame);
oRM.write("<div");
oRM.writeControlData(oControl);
oRM.addClass("customVizFrame");
oRM.writeClasses();
oRM.write(">");
oRM.renderControl(oControl.getAggregation("_vizFrames"));
oRM.write("</div>");
}
});});
所以我在xml中的控制器用法是：
<cViz:shadowCharts frameType="bar" flattenedData="/milk" dimensionDefinationData="Store Name" measureDefinationData="Revenue" press="shadowChartsClick"></cViz:shadowCharts>
有优化的余地:-)