Question

我正在使用openui5 Tabstrip。每个选项卡包含单独的js和控制器。再次每个选项卡包含两个视图（我使用的是sap.m.NavContainer），每个视图都是一个单独的js视图。我为d3 js子弹图编写自定义控件如下 var thisId;

/ *子弹图：包含一些D3.js代码的UI5自定义控件* /

sap.ui.core.Control.extend("control.BulletChart", { 
    /* the control API */
    metadata : {
         properties : {
                "items" : { type: "any" },
                "colorType" :{type:"string"},
                "height" : {type: "int"},
                "width" : {type: "int"},
                "popup" : {type: "any"}
            },
        events: {
            "select" : {},
            "selectEnd": {},
            //"click": {}
        }           
    },


    // the part creating the HTML:
    renderer : function(oRm, oControl) {    
        oRm.write("<div"); 
        oRm.writeControlData(oControl); 
        oRm.addClass("bullet");             
        oRm.writeClasses();                             
        oRm.write(">");
        oRm.write("</div>");
    },

    onAfterRendering: function() {
        var that = this;

        var deepClonedCopy = jQuery.extend(true, {}, this.getItems());
        var data;
        data = $.map(deepClonedCopy, function(el) { return el });
        var customId=this.getId();

        if(data){
        if(data[0]){
        data[0].ranges = JSON.parse("["+data[0].RANGES+"]");
        data[0].measures = JSON.parse("["+data[0].MEASURES+"]");
        data[0].markers = JSON.parse("["+data[0].MARKERS+"]");
        }

        var containerWidth = $("#"+customId).parent().width(); 
        var margin = {top: 15, right: 30, bottom: 20, left: 30},
        width = containerWidth- margin.left - margin.right,
        height = 65 - margin.top - margin.bottom;

        console.log("Actual bulletWidth",width);
        var chart = d3.bullet()
        .width(width)
        .height(height);
        var classType;
        if(this.getColorType()){
            classType = "reversebullet";
        }
        else{
            classType = "bullet";
        }
        var svg = d3.select("#"+customId).selectAll("svg")
          .data(data)
        .enter().append("svg")
          .attr("class", classType)
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          //.on("click", click)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
          .call(chart);
         }

});

现在我的问题是我在view.js

中使用了类似的内容

bulletChart = new control.BulletChart({
                                              layoutData: new sap.ui.layout.GridData({span: "L8 M12 S12"}),
                                            items: {
                                                path : "/genericData",
                                                }   
                                        }),

在我的控制器中，下面的代码是用onInit编写的：

var oBusinessData = {
                                    "genericData":[
                                        { "key":"1","RANGES":"50,75,100","MEASURES":20,"MARKERS":80,"tab":"sdto"},
                                ]};
buBullet.setModel(new sap.ui.model.json.JSONModel(oBusinessData ));

按照上面的代码，当我第一次打开标签时，它完美地工作，但当我切换标签时，我的子弹图表显得挤压。当我向var containerWidth = $("#"+customId).parent().width();发出警报时，我发现宽度比实际宽度要小，可能是由于图表渲染比其父级更快发生，因此将setTimeout解决了问题时间但不是正确的修复。任何人都可以告诉如何避免它并在渲染视图后渲染图表。所以上面的问题是在单个选项卡中使用带有两个视图的navcontainer时。如果我从一个选项卡更改为另一个选项卡，然后返回相同的选项卡，活动视图工作正常，但如果我导航第二个视图问题发生。只有在我更改标签视图时才会出现此问题。

Answer 1

你应该向控件注册onAfterRendering事件而不是使用＆＃34; setTimout＆＃34;，通过这样做，你可以在渲染完成时得到正确的时间。

parentControl.addEventDelegate({  
                  "onAfterRendering": function() {  
                      // parentControl has been rendered, here comes the code..
                      // Now here has the rendering finished, now you can get 
                      // the correct height of parentControl.
                  }  
            }, this);

编辑评论，希望它能帮到你;）

在Openui5

1 个答案: