Javascript 每次重新绘制Google图表时，都会创建新的containerTable

我有一个提交按钮，用于提交

谷歌图表

中

注释图表

的日期/时间段

当我点击按钮时，它会用新的查询结果重新绘制图表

  function drawChart(myData, id) {
    var data = new google.visualization.DataTable();

    var params = myData[0];
    for(var i = 0; i < params.length; i++) {
      data.addColumn(params[i][0], params[i][1]); //type and name pair
    }

    var q_result = myData[1];
    var rows = new Array(q_result.length);

    for(var i = 0; i < q_result.length; i++) {
      tmp_array = [];
      for(var j = 0; j < q_result[0].length; j++) {
        var tobeadded = params[j][0]=='date'?
        new Date(q_result[i][j]) : q_result[i][j];
        tmp_array.push(tobeadded);
      }
      rows[i] = tmp_array;
    }

    data.addRows(rows);

    var chart = new google.visualization.AnnotationChart(
    document.getElementById('chart_div'+id));

    var options = {
      displayAnnotations: true,
    };

    chart.draw(data, options);
  }

它会重新绘制图表，但每次都会生成一个尾随的空容器，如下面的屏幕截图所示

如果您看到屏幕截图，您可以看到有两个

chart\u div2\u AnnotationChart\u containerTable

我不能简单地忽略或删除这个新的containerTable，因为它包含刷新图表的按钮和注释

我怎样才能解决这个问题

当我重新绘制图表时，我使用新的查询结果调用下面的函数

  function drawChart(myData, id) {
    var data = new google.visualization.DataTable();

    var params = myData[0];
    for(var i = 0; i < params.length; i++) {
      data.addColumn(params[i][0], params[i][1]); //type and name pair
    }

    var q_result = myData[1];
    var rows = new Array(q_result.length);

    for(var i = 0; i < q_result.length; i++) {
      tmp_array = [];
      for(var j = 0; j < q_result[0].length; j++) {
        var tobeadded = params[j][0]=='date'?
        new Date(q_result[i][j]) : q_result[i][j];
        tmp_array.push(tobeadded);
      }
      rows[i] = tmp_array;
    }

    data.addRows(rows);

    var chart = new google.visualization.AnnotationChart(
    document.getElementById('chart_div'+id));

    var options = {
      displayAnnotations: true,
    };

    chart.draw(data, options);
  }

最初绘制图表时，将从下面的函数调用它

  function g(idx, start, end) {
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }
    else {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", '/${conf["name"]}/submit_data?idx=' + idx + '&start=' + start + '&end=' + end, true);
    xmlhttp.onreadystatechange = function(i) {
      return function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          drawChart(JSON.parse(xmlhttp.responseText), i);
        }
      };
    }(idx);
    xmlhttp.send();
  }

  function getData() {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xhrs = [];
    if(window.XMLHttpRequest) {
      for (var i = 0; i < ${size}; ++i) {
        xhrs.push(new XMLHttpRequest());
      }
    }

    else { // code for IE6, IE5
      for (var i = 0; i < ${size}; ++i) {
        xhrs.push(new ActiveXObject("Microsoft.XMLHTTP"));
      }
    }

    for (var i = 0; i < ${size}; ++i) {
      xhrs[i].open("GET", '/${conf["name"]}/submit_data?idx=' + i, true);
      xhrs[i].onreadystatechange = function(idx) {
        return function() {
          if(xhrs[idx].readyState == 4 && xhrs[idx].status == 200) {
            drawChart(JSON.parse(xhrs[idx].responseText), idx);
          }
        };
      }(i);
      xhrs[i].send();
    }
  }

函数getData（）{ //IE7+、Firefox、Chrome、Opera、Safari的代码 xhrs=[]； if（window.XMLHttpRequest）{ 对于（变量i=0；i<${size}；++i）{ push（新的XMLHttpRequest（））； } } else{//IE6、IE5的代码 对于（变量i=0；i<${size}；++i）{ push（新的ActiveXObject（“Microsoft.XMLHTTP”）； } } 对于（变量i=0；i<${size}；++i）{ xhrs[i].open（“GET”，'/${conf[“name”]}/submit_data？idx='+i，true）； xhrs[i].onreadystatechange=函数（idx）{ 返回函数（）{ if（xhrs[idx].readyState==4&&xhrs[idx].status==200）{ drawChart（JSON.parse（xhrs[idx].responseText），idx）； } }; }（i） )； xhrs[i].send（）； } }

---

以下是一些重用图表对象而不是重新创建它们的示例代码：

function drawCharts () {
    var data = [], charts = [], xhrs = [], options = {
        displayAnnotations: true
    };

    for (var i = 0; i < ${size}; ++i) {
        if(window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xhrs.push(new XMLHttpRequest());
        }
        else {
            // code for IE6, IE5
            // you probably want to throw an error here, since the visualization API does not support IE 5, 6 anyway
            xhrs.push(new ActiveXObject("Microsoft.XMLHTTP"));
        }
        charts.push(new google.visualization.AnnotationChart(document.getElementById('chart_div'+id));
        xhrs[i].open("GET", '/${conf["name"]}/submit_data?idx=' + i, true);
        xhrs[i].onreadystatechange = function(idx) {
            return function() {
                if(xhrs[idx].readyState == 4 && xhrs[idx].status == 200) {
                    var myData = JSON.parse(xhrs[idx].responseText);
                    data[idx] = new google.visualization.DataTable();

                    var params = myData[0];
                    for(var i = 0; i < params.length; i++) {
                        data[idx].addColumn(params[i][0], params[i][1]); //type and name pair
                    }

                    var q_result = myData[1];
                    var rows = new Array(q_result.length);

                    for(var i = 0; i < q_result.length; i++) {
                        tmp_array = [];
                        for(var j = 0; j < q_result[0].length; j++) {
                            var tobeadded = params[j][0]=='date' ? new Date(q_result[i][j]) : q_result[i][j];
                            tmp_array.push(tobeadded);
                        }
                        rows[i] = tmp_array;
                    }

                    data[idx].addRows(rows);
                    charts[idx].draw(data[idx], options);
                }
            };
        }(i);
        xhrs[i].send();
    }
}

函数绘图图（）{
变量数据=[]、图表=[]、xhrs=[]、选项={
displayAnnotations：true
};
对于（变量i=0；i<${size}；++i）{
if（window.XMLHttpRequest）{
//IE7+、Firefox、Chrome、Opera、Safari的代码
push（新的XMLHttpRequest（））；
}
否则{
//IE6、IE5的代码
//您可能想在这里抛出一个错误，因为可视化API无论如何都不支持IE5、6
push（新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
charts.push（新的google.visualization.AnnotationChart（document.getElementById（'chart_div'+id））；
xhrs[i].open（“GET”，'/${conf[“name”]}/submit_data？idx='+i，true）；
xhrs[i].onreadystatechange=函数（idx）{
返回函数（）{
if（xhrs[idx].readyState==4&&xhrs[idx].status==200）{
var myData=JSON.parse（xhrs[idx].responseText）；
data[idx]=新的google.visualization.DataTable（）；
var params=myData[0]；
对于（变量i=0；i

你能在调用

drawchart（）

的地方发布代码吗？我发布了它们。谢谢你似乎遇到了一个bug（）。我建议重新编写代码以使用相同的图表对象（而不是每次调用

drawchart

），只更改数据。这样应该可以避免问题。@asgallent你能说得更具体一点吗？