javascript - googlechart 可以同时查询超过 1 个电子表格吗？

Question

因为我尝试用 1 个句柄函数同时查询 3 个表和 3 个图表，它有效但结果是错误的(它在 3 个 div 中显示相同的图表)

所以我想我必须在每个图表上添加句柄函数，例如

google.charts.load('current', {packages: ["geochart"]});

google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
		var query1 = new google.visualization.Query("https://docs.google.com/spreadsheets/d/14VouG7zZqHGB9CA6bxQx6CXX-TvOYkSqTmrN5DAj1Do/edit#gid=1175123524");
		
		var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1RsugJPtz2EdHOLaiL0SvR9bh61H-vAgn9x1QBjIJ--c/edit?usp=sharing');
		
		var query3 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1zPP22gUPLDqTrvASIU3OXpmeHL_9IBS2O4z75g-1BHY/edit?usp=sharing');
		
		query1.send(handleQueryResponseTR1);
		query2.send(handleQueryResponseTR2);
		query3.send(handleQueryResponseTR3);
	}

	function handleQueryResponseTR1(response1) {
		if (response1.isError()) {
			alert('Error in query: ' + response1.getMessage() + ' ' + response1.getDetailedMessage());
			return;
		}
		function handleQueryResponseTR2(response2) {
		if (response2.isError()) {
			alert('Error in query: ' + response2.getMessage() + ' ' + response2.getDetailedMessage());
			return;
		}
		function handleQueryResponseTR3(response3) {
		if (response3.isError()) {
			alert('Error in query: ' + response3.getMessage() + ' ' + response3.getDetailedMessage());
			return;
		}
		var data1 = response1.getDataTable();
		var data2 = response2.getDataTable();
		var data3 = response3.getDataTable();

但是我得到了一个错误

handleQueryResponseTR2 is not defined

所以我不知道google chart是否可以在一个页面中查询超过1个工作表？

Answer 1

我不相信 googlechart 查询在同时进行多个查询时有任何问题，来回答这个问题。

关于您的代码:

您的 handleQueryResponseTR2 函数是 handleQueryResponseTR1 中的本地函数，但您尝试从 drawRegionsMap() 中调用它。 handleQueryResponseTR2() 未在该范围内定义。

将 handleQueryResponseTR2() 移动到上层作用域，使其对调用函数可见。

事实上，将所有 handleQueryResponse 函数移至上层。

var data1;
var data2;
var data3;

function handleQueryResponseTR1(response1) {
    if (response1.isError()) {
        alert('Error in query: ' + response1.getMessage() + ' ' + response1.getDetailedMessage());
        return;
    }
    data1 = response1.getDataTable();
}

function handleQueryResponseTR2(response2) {
    if (response2.isError()) {
        alert('Error in query: ' + response2.getMessage() + ' ' + response2.getDetailedMessage());
        return;
    }
    data2 = response2.getDataTable();
}

function handleQueryResponseTR3(response3) {
    if (response3.isError()) {
        alert('Error in query: ' + response3.getMessage() + ' ' + response3.getDetailedMessage());
        return;
    }
    data3 = response3.getDataTable();
}

function drawRegionsMap() {
    var query1 = new google.visualization.Query("https://docs.google.com/spreadsheets/d/14VouG7zZqHGB9CA6bxQx6CXX-TvOYkSqTmrN5DAj1Do/edit#gid=1175123524");

    var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1RsugJPtz2EdHOLaiL0SvR9bh61H-vAgn9x1QBjIJ--c/edit?usp=sharing');

    var query3 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1zPP22gUPLDqTrvASIU3OXpmeHL_9IBS2O4z75g-1BHY/edit?usp=sharing');

    query1.send(handleQueryResponseTR1);
    query2.send(handleQueryResponseTR2);
    query3.send(handleQueryResponseTR3);
}

请注意，当收到响应时，会异步调用 handleQueryResponse 函数。