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

今天我进入了一个情况,我有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 ""

可能它与属性类型有关.

请帮助我满足要求