Question

我正在尝试在同一页面上进行多次聊天，每次聊天都使用不同的电子表格网址作为其数据源。

下面的代码工作正常，但我真的想要为不同的数据范围设置多个网址，并且每次都显示不同的图表。

当我最初尝试这个时，它只显示了我试图绘制的最后一张图表。

我已经重新编写了脚本（仍然有效），以便更接近我为多个图表及其位置提供多组数据的情况。但它并不完全存在。这基于以下帖子：

How to add two Google charts on the one page?

我认为我需要将多组数据作为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);
}

如何从两个单独的电子表格数据源在一个页面上获取两个不同的谷歌图表

1 个答案: