3

我有一个页面，其中包含从 Google 电子表格生成的许多图表。

典型代码如下所示：

var url = "http://my.googlespreadsheet.com/tq?argumentshereblahblahblah";
// create and send off the query
var query = new google.visualization.Query( url );
query.send( handleQueryResponse );

function handleQueryResponse(response) {
    // omitted code to handle errors
    // create new chart object, specify location in page
    var chart = new google.visualization.BarChart( document.getElementById('chart-' + i));
    // draw chart
    chart.draw( data, {} );
}

由于我在页面上有几个图表，我想以编程方式创建它们，而不必拥有看起来相同的x函数，只是图表位置和标题不同。我已经设置了一个电子表格引用数组，我遍历这些引用，将每个引用传递给运行上述代码的函数：创建查询、发送查询、处理响应。我想要做的是将一个额外的参数传递给 handleQueryResponse 回调，以便我可以指定图形应该在页面上的位置。不过，我无法找到将变量放入 handleQueryResponse 的方法。如果我这样做：

// array of spreadsheet refs
var quArr = ['gid=2&range=D2%3AE10&headers=-1','gid=2&range=D15%3AE19&headers=-1', (etc.) ];
var base_url = "http://my.googlespreadsheet.com/tq?";
var i; // iterator

// iterate through the spreadsheet refs and send off the queries for each
for (i = 0; i < quArr.length; i++){
    var url = q_base + quArr[i];
    var query = new google.visualization.Query( url );
    query.send( handleQueryResponse );
}

// deal with the responses
function handleQueryResponse(response) {
    // omitted code to handle errors
    // get the data from the response
    var data = response.getDataTable();
    // create new chart object, specify location in page
    // anchors in the page correspond to where the chart should go
    var chart = new google.visualization.BarChart( document.getElementById('chart-' + i));
    chart.draw( data, { extra args } );
}

...返回响应的异步性质意味着迭代器与我发送请求时的值不同。

来自API 文档的额外信息：

发送（回调）

将查询发送到数据源。callback应该是数据源响应时调用的函数。回调函数将接收 google.visualization.QueryResponse 类型的单个参数。返回值：无

问题：

1) API 文档中关于 query.send(callback) 的内容是否本质上意味着我无法更改回调以获取额外的参数？

2）任何人都可以提出解决这个问题的另一种方法吗？

4

1 回答 1

3

刚刚找到了我自己问题的答案 - 哇哦！应该坚持久一点。;)

万一它对其他人有用，我创建了一个新函数来执行查询并为回调使用了一个闭包。这是重组后的代码：

for (var i = 0; i < quArr.length; i++){
    var url = q_base + quArr[i];
    var query = new google.visualization.Query( url );
    doQuery(query, i);
}

function doQuery(q, it){
    q.send( function(response){
        // omitted error handling code
        var data = response.getDataTable();
        var chart = new google.visualization.BarChart( document.getElementById('chart-' + it));
        chart.draw( data, { other args } );
    });
}
于 2013-03-20T18:12:20.907 回答