Question

Hello 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",
                "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 ""

可能与属性类型有关。

请帮我解决问题

Answer 1

我在朋友的帮助下想出了这个问题。

这里的问题是我们无法在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>

有优化的余地： - ）

Answer 2

您可以尝试在“INIT”函数内实现日志记录。确保this.getFrameType引用正确的实例和验证“INIT”功能没有被执行两次，因为它也可能是一个时间问题。

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

使用viz框架作为聚合的自定义控件

2 个答案: