Question

我的完整代码如下{@ 3}}

<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＆amp; query1每个两个列，但第一列日期对两者都是通用的。我想要一个由三个列组成的最终数据，例如第一个日期（常见），第二个 Kf 的Electrolyser-A＆amp;电解质-B的第三个 Kf 。最后绘制一个ColumnChart＆amp;表格显示两个电解槽的并排比较。我无法使用像

这样的东西

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

它应该比较第一列＆amp;从data0＆amp;中复制第二列数据1。我的理解错了吗？其次，有人可以优化代码，以便不需要为每个查询定义function handleQueryResponse。

Answer 1

您在全局范围内声明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});

加入两个查询的列

1 个答案: