如何从两个单独的电子表格数据源在一页上获取两个不同的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);
}