如何從兩個單獨的電子表格數據源在一頁上獲取兩個不同的Google圖表

Question

我試圖在同一頁面上進行多個聊天，每個聊天都使用不同的電子表格網址作為其數據源。

下面的代碼可以正常工作，但是我真的想為不同的數據范圍提供多個網址，並每次顯示不同的圖表。

當我最初嘗試此操作時，它只顯示我嘗試繪制的最后一張圖表。

我對腳本進行了重新設計（該腳本仍然有效），以使其更接近出現多個圖表及其位置的多個數據集的情況。 雖然還不在那里。 這是基於以下帖子：

如何在一頁上添加兩個Google圖表？

我想我需要將多組數據作為handleQueryResponse函數的屬性傳遞，但我不知道該怎么做。

我試圖先讓它僅對一組數據起作用，如果可以，請向其中添加多組數據。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    (function() { // Begin scoping function
        // vars Global to my code, invisible outside the scoping function
        // Set chart options
        // I'll be using multiple options for different charts, options1, options2 etc.
        var options1 = {'title':'Light & Temperature data - Last 24 Hours',
                      'width':750,
                      'height':400,
                      'curveType': 'function',
                      'backgroundColor':'ffe599',
                      "hAxes":[{"title":"Time"}],
                      "vAxes":[{"title":"Temp in °C -- Light Levels"}]};

        //I think I will need containerID1, containerID2 etc. one for each chart
        var containerID = 'chart_div1';
        //same for chartType1, chartType2
        var chartType = 'LINECHART';

    // Load the Visualization API and the core chart package.
    google.load('visualization', '1.0', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    // Callback that creates and populates a data table, 
    // instantiates the chart, passes in the data and
    // draws it.
    function drawChart() {

        //I'm going to have multiple urls and each one will be the source for a seperate chart
        var query1 = new google.visualization.Query(
        'https://docs.google.com/spreadsheet/ccc?key=0ArGuv......&transpose=0&headers=1&range=L1%3AN500&gid=1');
        query1.send(handleQueryResponse);
    }
    // how do I get containerID1, containerID2, chartType1, ChartType2 Options1, Options2 etc. into this function?
    function handleQueryResponse(response) {
        if (response.isError()) {

            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }
        var data = response.getDataTable();
        var containerDiv = document.getElementById(containerID);
        var chart = false;

        // Instantiate and draw the chart, based on some the chartType and passing in the options.
        if (chartType.toUpperCase() == 'BARCHART') {
            chart = new google.visualization.BarChart(containerDiv);
        }
        else if (chartType.toUpperCase() == 'COLUMNCHART') {
            chart = new google.visualization.ColumnChart(containerDiv);
        }
        else if (chartType.toUpperCase() == 'PIECHART') {
            chart = new google.visualization.PieChart(containerDiv);
        }
        else if (chartType.toUpperCase() == 'LINECHART'){
            chart = new google.visualization.LineChart(containerDiv);
        }

        if (chart == false) {
            return false;
        }
        chart.draw(data, options1);
    }
})();         // End scoping function
</script>

<!--Divs that will hold the charts - Only chart_div1 is in effect at the moment -->
<div id="chart_div1"></div>
<div id="chart_div2"></div>

Answer 1

如果要查詢兩個不同的數據源，則需要兩個響應處理程序和兩個查詢：

function drawChart() {
    var query1 = new google.visualization.Query(url1);
    query1.send(handleQueryResponse1);
    var query2 = new google.visualization.Query(url2);
    query2.send(handleQueryResponse2);
}