javascript - 每次重绘Google Chart时都会创建新的containerTable

Question

我有一个提交按钮，用于提交 Google 图表 中注释图表 的日期/时间段。

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

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

https://www.dropbox.com/s/7fyiy6pxlxkmeik/Screen%20Shot%202014-05-01%20at%2011.58.59%20AM.png

如果您看到屏幕截图，您可以看到有两个 chart_div2_AnnotationChart_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);
  }

<小时/>

当图表重新绘制时，在下面的函数中调用drawChart()。

  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();
    }
  }

Answer 1

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

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();
    }
}