Sapui5 以viz帧作为聚合的自定义控件_Sapui5

Sapui5 以viz帧作为聚合的自定义控件

sapui5

Sapui5 以viz帧作为聚合的自定义控件,sapui5,Sapui5,您好，Sapui5开发者今天，我遇到了这样一种情况：我有5个图表来显示不同的样式和使用不同的数据，所以我想不是在我的页面中多次使用viz框架，而是要编写一个自定义控件，它接受GraphType、FlattedDataset数据、维度定义值、MeasuredDefinition名称值、提要项列表因此，一般代码如下所示 <viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"

您好，Sapui5开发者

今天，我遇到了这样一种情况：我有5个图表来显示不同的样式和使用不同的数据，所以我想不是在我的页面中多次使用viz框架，而是要编写一个自定义控件，它接受GraphType、FlattedDataset数据、维度定义值、MeasuredDefinition名称值、提要项列表

因此，一般代码如下所示

<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>

可能与属性类型有关。

请帮助我解决需求问题

您可以尝试在“INIT”函数中实现日志记录。确保

this.getFrameType

引用了正确的实例和验证“INIT”-函数没有被执行两次，因为它也可能是一个计时问题

您还可以尝试实现一个特定的setter函数（setValue），以确保在“INIT”函数之前调用setter。

我在朋友的帮助下解决了这个问题

所以这里的问题是我们无法在init函数中获取属性值，所以我将代码转换为renderer函数

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

sap.ui.define([
“sap/ui/core/Control”，
“sap/viz/ui5/controls/VizFrame”，
“sap/viz/ui5/data/FlattedDataset”，
“sap/viz/ui5/controls/common/feeds/FeedItem”]，功能（控制、gViz、gData、gFeeds）{
“严格使用”；
返回Control.extend（“NWS.Control.shadowCharts”{
“元数据”：{
“财产”：{
“价值”：{
“类型”：“浮动”
},
“框架类型”：{
“类型”：“字符串”
},
“扁平化数据”：{
“类型”：“字符串”
},
“尺寸定义数据”：{
“类型”：“字符串”
},
“测量的财务数据”：{
“类型”：“字符串”
},
“高度”：{
“类型”：“字符串”
},
“宽度”：{
“类型”：“字符串”
},
“新闻界”：{
“类型”：“字符串”
}
},
“聚合”：{
“viz框架”：{
“类型”：“sap.viz.ui5.controls.VizFrame”，
“多重”：假，
“可见性”：“隐藏”
}
},
“事件”：{
按：{}
}
},
init:function（）{
this.getControlInstance=this；
},
_数据选择：功能（oEvent）{
本节为fireEvent（“新闻”）；
},
渲染器：函数（oRM、oControl）{
var oDataSet=new sap.viz.ui5.data.flattedDataset({
“数据”：{
“路径”：oControl.getFlattedData（）
},
“尺寸”：[{
“名称”：oControl.getDimensionDefinitionData（），
“值”：“{”+oControl.GetDimensionDefinitionData（）+”}”
}],
“措施”：[{
“名称”：oControl.getMeasureDefinitionData（），
“值”：“{”+oControl.GetMeasureDefinitionData（）+”}”
}]
});
var gType=oControl.getFrameType（）；
var measureUid=“”；
var-dimensionuid=“”；
开关（gType）{
案例“甜甜圈”：measureUid=“size”dimensionuid=“color”中断；
案例“条”：measureUid=“valueAxis”dimensionuid=“categoryAxis”中断；
默认值：抛出“错误原因未知的图形类型”
}
var feedItem1=新sap.viz.ui5.controls.common.feeds.FeedItem({
“uid”：measureUid，
“类型”：“度量”，
“值”：[oControl.getMeasureDefinitionData（）]
});
var feedItem2=新sap.viz.ui5.controls.common.feeds.FeedItem({
“uid”：维度uid，
“类型”：“维度”，
“值”：[oControl.getDimensionDefinitionData（）]
});
var vizFrame=new sap.viz.ui5.controls.vizFrame({
“vizType”：oControl.getFrameType（），
“数据集”：oDataSet，
“提要”：[feedItem1，feedItem2]，
“iConfig”：“{applicationstart:'fiori'}”，
“selectData”：oControl.\u dataSelect.bind（oControl.getControlInstance）
})
vizFrame.setVizProperties({
标题：{
可见：假，
文字：“Statastics”
}
});
oControl.setAggregation（“vizFrames”，vizFrame）；
oRM.写（“”）；
oRM.renderControl（oControl.getAggregation（“_-vizFrames”）；
oRM.写（“”）；
}
});});

所以我的控制器在xml中的用法是：

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

 <cViz:shadowCharts frameType="bar" flattenedData="/milk" dimensionDefinationData="Store Name" measureDefinationData="Revenue" press="shadowChartsClick"></cViz:shadowCharts>

有优化的余地：-）

所以你想让别人为你编写控件？如果你先尝试，然后带着一些具体的问题回来会怎么样？我已经更新了问题，请看一下

this.getFrameType() as "bar" but not "donut",this.getFlattenedData() as ""

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

 <cViz:shadowCharts frameType="bar" flattenedData="/milk" dimensionDefinationData="Store Name" measureDefinationData="Revenue" press="shadowChartsClick"></cViz:shadowCharts>