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 ドキュメントからの追加情報:

send(コールバック)

クエリをデータ ソースに送信します。callbackは、データ ソースが応答したときに呼び出される関数である必要があります。コールバック関数は、タイプ google.visualization.QueryResponse の単一のパラメーターを受け取ります。戻り値: なし

質問:

1) query.send( callback ) に関する API ドキュメントに書かれていることは、本質的に、追加の引数を取るためにコールバックを変更できないことを意味しますか?

2) 誰かがこの問題を回避する別の方法を提案できますか?

4

1 に答える 1

3

私自身の質問に対する答えを見つけただけです-woohoo！もう少し頑張らなければなりませんでした。;）

他の人に役立つ場合に備えて、クエリを実行する新しい関数を作成し、コールバックにクロージャーを使用しました。再編成されたコードは次のとおりです。

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 に答える