Google visualization 连接两个查询的列

我的完整代码如下@

~Khanz~
load（'visualization'，'1'，{packages:['corechart']}）；
load（'visualization'，'1'，{packages:['table']}）；
变量选项={
标题：“电解槽数据”，
图例：{位置：'bottom'}，
hAxis:{title:'Date'，titleTextStyle:{color:'red'}，格式：'mmmd'，网格线：{count:'31'}
};
var数据；var数据0；var数据1；
var query0=new google.visualization.Query(
'http://docs.google.com/spreadsheet/ccc?key=0AoTfmfAJUVoSdGRIVklheHdIS1ZCaHQ1MllvM19hUWc&sheet=MonthlyAvg-A'）；
var query1=新建google.visualization.Query(
'http://docs.google.com/spreadsheet/ccc?key=0AoTfmfAJUVoSdDhKOWRGRDNyeks1aF9jSFpHcmFfblE&sheet=MonthlyAvg-B'）；
函数drawChart（）{
query0.setQuery（'select D，E limit 7'）；
query0.send（handleQueryResponse0）；
query1.setQuery（'SELECT D，E limit 7'）；
查询1.发送（handleQueryResponse1）；
}
函数handleQueryResponse0（response0）{
if（response0.isError（））{
警报（'查询中的错误：'+response0.getMessage（）+'+response0.getDetailedMessage（））；
回来
}
var data0=response0.getDataTable（）；
var table0=新的google.visualization.Table（document.getElementById（'Table_div'））；
表0.图纸（数据0）；
var chart0=新的google.visualization.ColumnChart（document.getElementById（'visualization'）；
图表0.绘制（数据0，选项）；
} 
函数handleQueryResponse1（response1）{
if（response1.isError（））{
警报（'查询中的错误：'+response1.getMessage（）+'+response1.getDetailedMessage（））；
回来
}
var data1=response1.getDataTable（）；
var table1=新的google.visualization.Table（document.getElementById（'Table_div2'）；
表1.图纸（数据1）；
var chart1=新的google.visualization.ColumnChart（document.getElementById（'visualization2'）；
图表1.绘图（数据1，选项）；
//data=newgoogle.visualization.data.join（data1，data0，'full'，[0]，[1]，[1]）；
//表1.图纸（数据1）；
}    
setOnLoadCallback（drawChart）；

到目前为止，我能够正确地可视化来自两个不同来源的数据，但是我需要的是连接来自两个不同查询的数据。在所示的情况下，

query0

和

query1

分别拉动两列，但是第一列日期对这两列来说都是通用的。我想要一个由三列组成的最终数据，例如第一列日期（通用）第二列电解槽a的Kf，第三列电解槽B的Kf。最后绘制一个柱形图和一个表格，显示两个电解槽的并排比较。我不能用这样的方法来做

data=new google.visualization.data.join（data1、data0、'full'、[0]、[1]、[1]）

它应该比较了第一列并从data0和data1复制第二列。我的理解错了吗？
其次，是否有人可以优化代码，以便不必为每个查询定义
函数handleQueryResponse
。
在全局范围内声明
data0
和
data1
，然后在
handleQueryResponse
函数中创建每个函数的局部范围变量，因此，虽然
data0
存在于
handleQueryResponse1
中，但它是
null
。即使使用全局范围变量，这也不能解决问题，因为
query1
很可能在
query0
之前返回，因此
data0
仍然为空

请尝试以下方法：

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});

函数绘图图（）{
//为每个查询创建一个包含一个false的数组
var ready=[false，false]；
//创建一个数组来保存数据表
var dataArray=[]；
函数handleQueryResponse（响应，索引）{
if（response.isError（））{
警报（'query'+index+'中出错：'+response.getMessage（）++'+response.getDetailedMessage（））；
回来
}
就绪[索引]=真；
dataArray[index]=response.getDataTable（）；
var-allReady=true；
//检查是否已返回所有查询
对于（变量i=0；ifunction 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});