你好Sapui5开发者,
今天我进入了一个情况,我有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","measureDefinationData": { "type": "string","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/common/Feeds/FeedItem"],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" } },"visibility": "hidden" } },"events":{ press:{} } },init: function() { this.getControlInstance=this; },_dataSelect: function(oEvent) { this.fireEvent("press"); },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,"values": [oControl.getMeasureDefinationData()] }); var FeedItem2 = new sap.viz.ui5.controls.common.Feeds.FeedItem({ "uid": dimesionUid,"values": [oControl.getDimensionDefinationData()] }); var vizFrame = new sap.viz.ui5.controls.VizFrame({ "vizType": oControl.getFrameType(),"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>
有优化的余地:-)
