我有一个提交按钮,可以在Annotation Chart
中提交Google Charts
的日期/时间段。
当我点击该按钮时,它会使用新的查询结果重新绘制图表。
它会重新绘制图表,但每次执行此操作时,它还会生成一个尾随的空容器,如下面的屏幕截图所示。
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();
}
}
答案 0 :(得分: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();
}
}