我的完整代码如下@ 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>

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

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

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

===============>>#1 票数:0 已采纳

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

  ask by nightcrawler translate from so

未解决问题?本站智能推荐:

1回复

两个阵列的Google散点图

您好这里的人员是我使用的Google分散图表代码: 正如您在代码中看到的,我使用$Variance数组传递给$data现在我需要再使用一个数组$Emp_RecFactor ,我需要在这两个数据之间绘制一个图... 我还想在此功能上添加鼠标功能,这样如果有人将鼠标悬停在选定的点上,它
1回复

Android页面上的两个HTML

我正在使用Google可视化,我想知道是否可以在同一页面上显示2个图表(1个柱形图和另一个甜甜圈图)。 提前致谢。 织物 PS:即时通讯使用Android Studio
1回复

等待两个异步功能

我的问题是我想根据从提取返回的数据绘制一个图表。 我知道我可以做到以下几点 但是,我想做这样的事情 这样一来,数据和google库就可以异步加载了,而不必等待另一个。 这可能吗? 如果是这样,我该怎么办? 谢谢 编辑: 我已经确定不需要使用setOnLoadC
1回复

如何在两个不同的Google量规上添加不同的后缀

我有一个运行灯服务器的Raspberry Pi 3,并从AM2302传感器读取数据,该数据存储在mysql数据库中,然后显示在通过php文件的网页中。 主要问题是想在两个Google量表上分配不同的后缀(一个用于温度,一个用于湿度),但不能按需工作,当我刷新页面时,它会显示零值,每个后缀都
1回复

Google Charts Pie:如何在0开始两个值?

我打算尽可能地清楚:) 我想在饼图中显示三个值: 找到的物品数量 已搜索的项目数 要搜索的总数。 例如,我有100个要搜索的项目(总计)。 在那100个,我已经处理了45个(搜索过)。 在那45个人中,我找到了10个。 所以: 已找到1
1回复

一页上有两个不同的Google图表

我最初在page1上有一个列图,在page2上有一个线图。 它们在自己的页面上都显示良好。 当我尝试将两者合并在一页上时,它们都会显示,但它们都是列图。 我不确定自己在做什么错。 到目前为止,这是我的代码:
1回复

Google Visualization库加载会产生两个不同的结果

正确加载Google Visualization库时,我遇到了一个非常令人沮丧的问题。 我的页面上有两个图表。 一个是柱状图,另一个是折线图。 我正在这样加载我的库: google.load('visualization', '1.0', {'packages':['corechart
1回复

具有超级代理的一页上的两个Google图表

如何在一页上显示两个Google图表? 我正在使用超级代理从Google Analytics(分析)API获取JSON表。 当前,仅显示第一个图表(表)。 缺少第二张图表。 我的代码附在下面。 我对API不太熟悉。 我检查了一些解决方案,但是所有解决方案都具有本地数据,而不是
1回复

Google图表将鼠标悬停在两个图表上

这个问题与使用Google Charts有关。 我有一个包含贡献金额类别的数据集,存储在一个月的几天中。 我用饼图表示整个月,并用堆积的条形图表示各天的数据。 两种图表基本上都基于相同的信息。 如果我以正确的顺序给两个图表提供信息,则两者之间的颜色是一致的(即,一个类别中的每个类别与
1回复

同一张桌子上的两个事件

我有一张桌子,还有一个条形图,显示了与桌子中相同的内容。 当我在表格中选择特定行时,我会为该特定行显示另一个更详细的图形,并且条形图会消失(隐藏)。 我想要的是,也可以做到另一种方式:在条形图中选择一个条应该突出显示表中的相关行,但不要“单击它”,因为这会触发表上的“ Selecthandl