连接两个查询的列

Question

我的完整代码如下@ http://jsbin.com/ciroy/8/edit

<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <title>~Khanz~</title>
   </title>
   <script type="text/javascript" src="//www.google.com/jsapi"></script>
   <script type="text/javascript">
     google.load('visualization', '1', {packages: ['corechart']});
     google.load('visualization', '1', {packages:['table']});
   </script>
   <script type="text/javascript">
         var options = {
         title: 'Electrolyser Data',
         legend: {position: 'bottom'},  
         hAxis: {title: 'Date', titleTextStyle: {color: 'red'}, format: 'MMM d', gridlines: {count: '31'}}
       };
   var data; var data0; var data1;  
   var query0 = new google.visualization.Query(
       'http://docs.google.com/spreadsheet/ccc?key=0AoTfmfAJUVoSdGRIVklheHdIS1ZCaHQ1MllvM19hUWc&sheet=MonthlyAvg-A');
   var query1 = new google.visualization.Query(
        'http://docs.google.com/spreadsheet/ccc?key=0AoTfmfAJUVoSdDhKOWRGRDNyeks1aF9jSFpHcmFfblE&sheet=MonthlyAvg-B');    
   function drawChart() { 
     query0.setQuery('select D,E limit 7');
     query0.send(handleQueryResponse0);
     query1.setQuery('SELECT D,E limit 7');
     query1.send(handleQueryResponse1);
   }


   function handleQueryResponse0(response0) {
     if (response0.isError()) {
       alert('Error in query: ' + response0.getMessage() + ' ' + response0.getDetailedMessage());
       return;
     }

  var data0 = response0.getDataTable(); 
     var table0 = new google.visualization.Table(document.getElementById('table_div'));
        table0.draw(data0);
var chart0 = new google.visualization.ColumnChart(document.getElementById('visualization'));
    chart0.draw(data0, options);
  } 
   function handleQueryResponse1(response1) {
     if (response1.isError()) {
       alert('Error in query: ' + response1.getMessage() + ' ' + response1.getDetailedMessage());
       return;
     }

  var data1 = response1.getDataTable(); 
     var table1 = new google.visualization.Table(document.getElementById('table_div2'));
      table1.draw(data1);
     var chart1 = new google.visualization.ColumnChart(document.getElementById('visualization2'));
   chart1.draw(data1, options);
 //data = new google.visualization.data.join(data1,data0,'full',[0],[1],[1]);     
    // table1.draw(data1);
  }    

   google.setOnLoadCallback(drawChart);
   </script>
 </head>
 <body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 500px;height: 500px"></div>
   <div id="visualization2" style="width: 500px;height: 500px"></div>
   <div id='table_div' style="width: 600px;"></div>
   <div id='table_div2' style="width: 600px;"></div>
 </body>
</html>

到目前为止，我已经能够正确地可视化来自两个不同来源的数据，但是我需要的是将来自两个不同查询的数据合并在一起。 在所示的情况下， query0和query1分别拉两列，但是第一列Date对两者都是通用的。 我想有例如第一日期 （公共） 三列组成的最终数据电解槽-A的第二Kf个 ＆电解槽-B的第三Kf个 。 最后绘制一个ColumnChart和Table来显示两个电解槽的并排比较。 我无法使用类似的方法

data = new google.visualization.data.join(data1,data0,'full',[0],[1],[1]);

它应该已经比较了第一列并从data0和data1复制了第二列。 我的理解错了吗？ 其次，有人可以优化代码，以便不需要为每个查询定义function handleQueryResponse 。

Answer 1

您在全局范围内声明data0和data1 ，然后在handleQueryResponse函数中创建每个范围的局部范围变体，因此，虽然data0存在于handleQueryResponse1 ，但它为null 。 即使您使用global-scope变量，也无法解决您的问题，因为query1很有可能在query0之前query0 ，因此data0仍为null。

请尝试以下方法：

function drawChart() {
    // create an array containing one false for each query
    var ready = [false, false];
    // create an array to hold the DataTables
    var dataArray = [];
    function handleQueryResponse(response, index) {
        if (response.isError()) {
            alert('Error in query ' + index + ': ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }
        ready[index] = true;
        dataArray[index] = response.getDataTable();
        var allReady = true;
        // check if all the queries have returned
        for (var i = 0; i < ready.length; i++) {
            if (!ready[i]) {
                allReady = false;
                break;
            }
        }
        // if all the queries have returned, draw the charts and tables
        if (allReady) {
            var data = new google.visualization.data.join(data[1], data[0], 'full', [0], [1], [1]);
            var options = {
                title: 'Electrolyser Data',
                legend: {position: 'bottom'},
                hAxis: {
                    title: 'Date',
                    titleTextStyle: {
                        color: 'red'
                    },
                    format: 'MMM d',
                    gridlines: {
                        count: 31
                    }
                }
            };
            var tables = [];
            tables[0] = new google.visualization.Table(document.getElementById('table_div0'));
            tables[0].draw(dataArray[0]);
            tables[1] = new google.visualization.Table(document.getElementById('table_div1'));
            tables[1].draw(dataArray[1]);
            tables[2] = new google.visualization.Table(document.getElementById('table_div2'));
            tables[2].draw(data);

            var charts = [];
            charts[0] = new google.visualization.ColumnChart(document.getElementById('visualization0'));
            charts[0].draw(dataArray[0], options);
            charts[1] = new google.visualization.ColumnChart(document.getElementById('visualization1'));
            charts[1].draw(dataArray[1], options);
        }
    }

    var query0 = new google.visualization.Query('http://docs.google.com/spreadsheet/ccc?key=0AoTfmfAJUVoSdGRIVklheHdIS1ZCaHQ1MllvM19hUWc&sheet=MonthlyAvg-A');
    var query1 = new google.visualization.Query('http://docs.google.com/spreadsheet/ccc?key=0AoTfmfAJUVoSdDhKOWRGRDNyeks1aF9jSFpHcmFfblE&sheet=MonthlyAvg-B');
    query0.setQuery('select D,E limit 7');
    query0.send(function (response) {
        handleQueryResponse(response, 0);
    });
    query1.setQuery('SELECT D,E limit 7');
    query1.send(function (response) {
        handleQueryResponse(response, 1);
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});