SAPUI5通过单击在新创建的控件（面板）中绘制Google图表

Question

我对JS没有太多经验。 但目前我需要创建HTML页面并在面板上显示Google图表（SAPUI5控件）的任务。 使用SAPUI5元素构建页面：

Vertical layout
|- Panel #1 (open)
|  |- Grid layout
|     |- Panel with google chart 1
|     |- Panel with google chart 2
|     |- Panel . . .
|     |- Panel with google chart N
|- Panel #2 (closed / collapsed)
|- Panel #3 (closed / collapsed)
|- . . .
|- Panel #M (closed / collapsed)

在实现该逻辑上我没有任何问题。 页面正在加载，并且图表绘制成功。 下一步是当用户打开任何关闭的面板时，执行绘制图表的逻辑。 我用函数来做到这一点：

function pressedCollapseButton(oControlEvent) {
  var panelID = oControlEvent.getParameter("id");
  panelID = cutFromString(panelID, (panelID.length - sufixClpsBtn.length), panelID.length);
  var oPanel = sap.ui.getCore().byId(panelID);
  if (!oPanel.getCollapsed()) {
    oPanel.setCollapsed(true);
  } else {
    oPanel.setCollapsed(false);
    if ( oPanel.getContent().length == 0 ) {
      // no GridLayout in main Panel; recive data and create new controls
      $.ajax({
        async: false,
        type: "GET",
        url: urlSAP,
        dataType: "json",
        data: {
          "lt" : "additional",
          "tgid" : panelID
        },
        success: function(oData){processData_2(oPanel, oData)}
      });
    }
  }
}

在函数“ processData_2”中，我基于接收到的数据创建GridLayout和一些面板。

function processData_2(oTileGroup, oDAB) {
  var arrayOfIDs = []; // chart ID (index) and div ID (array element value) where chart should be placed
  var oGridTiles = new sap.ui.layout.Grid({hSpacing: 1, vSpacing: 1});
  var oTile;
  // create panels using received data
  for (var i = 0; i < oDAB.elems.length; i++)
  {
    switch (oDAB.elems[i].type) {
      case ("TILE"):
        oTile = crtElement_Tile(oDAB.elems[i].title);
        arrayOfIDs[oDAB.elems[i].id] = String(oTile).split("#")[1] + "-cont";
        oGridTiles.addContent(oTile);
      break;
    }
  }
  oTileGroup.addContent(oGridTiles);
  startChartDrawing(oDAB.user, oDAB.elems, arrayOfIDs, false);
}

但是在函数“ startChartDrawing”中，脚本会为行发送“未捕获的错误：未定义容器”

chart1 = new google.visualization.ColumnChart(document.getElementById(arr[oCharts[i].id]));

据我了解，当我尝试在其中绘制图表时，尚未添加到页面的新面板。 请帮助找到解决方案。 完全创建所有控件时，可能会发生一些事件。

Answer 1

我找到了适合我的解决方案。 我替换为processData_2的最后一行

oTileGroup.addContent(oLayout);
var handler = function(){
  $(document).unbind('DOMNodeInserted.myEvent');
  startChartDrawing(oDAB.elems, arrayOfIDs, false);
};
$(document).bind('DOMNodeInserted.myEvent', handler);