Question

我试图用两个不同的数据源显示两个不同的图表。我的第二个函数drawChart3（）会覆盖第一个图表及其数据源。我试过增加一个时间听众来减轻但我没有成功。我对javascript很新，所以我很感激我的错误可能存在的任何提示。感谢

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
      google.setOnLoadCallback(drawChart3);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.

     function drawChart() {
        var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1ODIBoKW3H9bLNR2RnyfEqd9c0fzWaql1FfRp_JCWCyY/edit#gid=0');
        query.setQuery('select *');
        query.send(handleQueryResponse);
      }
     function drawChart3() {
        var query3 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1yiNn3oQYYK4Z1aCl5R2pGqFcZLU66uFA1tqW69sGrOg/edit#gid=0');
        query3.setQuery('select *');
        query3.send(handleQueryResponse);
      }
         //Set chart options
      var options = {'title': '^VIX Close & XX Correlation Coefficient',
                        'legend': {position: 'none'},
                        'width': 600,
                        'height': 300};

      //Set chart options
      var options3 = {'title': 'Search Queries: "XX", "Algorithmic Trading", "Trading", "Options"',
                        'legend': 'bottom',
                        chartArea:{left:60,top:50,width:'98%',height:'75%'},
                        'width': 1300,
                        'height': 500};

      function handleQueryResponse(response) {
        var data = response.getDataTable();
        var chart = new google.visualization.AreaChart(document.getElementById('chart-container'));
        google.visualization.events.addOneTimeListener(chart, 'ready', function() {
        var chart3 = new google.visualization.AreaChart(document.getElementById('chart3-container'));
        var data3 = response.getDataTable();
          chart3.draw(data3, options3);
        });
          chart.draw(data, options);
      }
    </script>
  </head>

  <body>

        <td><div id="chart-container" style="border: 1px solid #ccc"></div></td>
        <td><div id="chart3-container" style="border: 1px solid #ccc"></div></td>
  </body>
</html>

Answer 1

发生的事情是你每次都在写两张图表。我只是重写了你的函数来接受一个ID，所以它们不会互相覆盖。写得不好，但我认为这会做你想要的。

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawCharts);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.

     function drawCharts() {
        var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1ODIBoKW3H9bLNR2RnyfEqd9c0fzWaql1FfRp_JCWCyY/edit#gid=0');
        query.setQuery('select *');
        var query3 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1yiNn3oQYYK4Z1aCl5R2pGqFcZLU66uFA1tqW69sGrOg/edit#gid=0');
        query3.setQuery('select *');
        runQuery(query, 'chart-container')
        runQuery(query3, 'chart3-container')
      }

         //Set chart options
      var options = {'title': '^VIX Close & XX Correlation Coefficient',
                        'legend': {position: 'none'},
                        'width': 600,
                        'height': 300};

      //Set chart options
      var options3 = {'title': 'Search Queries: "XX", "Algorithmic Trading", "Trading", "Options"',
                        'legend': 'bottom',
                        chartArea:{left:60,top:50,width:'98%',height:'75%'},
                        'width': 1300,
                        'height': 500};

      function runQuery(q, chartId) {
        q.send( function(response){
        var data = response.getDataTable();
        var chart = new google.visualization.AreaChart(document.getElementById(chartId));
        chart.draw(data, options);
        });
      }
    </script>
  </head>

  <body>

        <td><div id="chart-container" style="border: 1px solid #ccc"></div></td>
        <td><div id="chart3-container" style="border: 1px solid #ccc"></div></td>
  </body>
</html>

Answer 2

你可以尝试这样的事情。

首先，建议使用较新的库loader.js与jsapi 通常，setOnLoadCallback每页只调用一次请参阅Load the Libraries了解更多信息......

这里，init函数用于启动事物，
并使用匿名函数代替handleQueryResponse

<script src="https://www.gstatic.com/charts/loader.js"></script>

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(init);

function init() {
  var options = {
    'title': '^VIX Close & XX Correlation Coefficient',
    'legend': {position: 'none'},
    'width': 600,
    'height': 300
  };

  var options3 = {
    'title': 'Search Queries: "XX", "Algorithmic Trading", "Trading", "Options"',
    'legend': 'bottom',
    chartArea:{left:60,top:50,width:'98%',height:'75%'},
    'width': 1300,
    'height': 500
  };

  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1ODIBoKW3H9bLNR2RnyfEqd9c0fzWaql1FfRp_JCWCyY/edit#gid=0');
  query.setQuery('select *');
  query.send(function () {
    var data = response.getDataTable();
    var chart = new google.visualization.AreaChart(document.getElementById('chart-container'));
    chart.draw(data, options);
  });

  var query3 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1yiNn3oQYYK4Z1aCl5R2pGqFcZLU66uFA1tqW69sGrOg/edit#gid=0');
  query3.setQuery('select *');
  query3.send(function () {
    var data3 = response.getDataTable();
    var chart3 = new google.visualization.AreaChart(document.getElementById('chart3-container'));
    chart3.draw(data3, options3);
  });
}

Answer 3

感谢您的帮助。我怀疑我做了一些错误来调用相同的响应。我将handlerResponseQuery更改为每个查询都是唯一的。我需要编辑成一个单独的函数（），但现在这是有效的。调用setOnLoadCallback超过1次是不好的程序？我仍然称之为两次，但只是好奇，所以我可以理解为什么这不是最好的方法的技术成本。

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);
      google.charts.setOnLoadCallback(drawChart2);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.

     function drawChart() {
        var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1ODIBoKW3H9bLNR2RnyfEqd9c0fzWaql1FfRp_JCWCyY/edit#gid=0');
        query.setQuery('select *');
        query.send(handleQueryResponse);
      }
     function drawChart2() {
        var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1yiNn3oQYYK4Z1aCl5R2pGqFcZLU66uFA1tqW69sGrOg/edit#gid=0');
        query2.setQuery('select *');
        query2.send(handleQueryResponse2);
      }
         //Set chart options
      var options = {'title': '^VIX Close & XX Correlation Coefficient',
                        'legend': {position: 'none'},
                        'width': 600,
                        'height': 300};

      //Set chart options
      var options2 = {'title': 'Search Queries: "XX", "Algorithmic Trading", "Trading", "Options"',
                        'legend': 'bottom',
                        chartArea:{left:60,top:50,width:'98%',height:'75%'},
                        'width': 1300,
                        'height': 500};

      function handleQueryResponse(response) {
        var data = response.getDataTable();
        var chart = new google.visualization.BarChart(document.getElementById('chart-container'));
        chart.draw(data, options)
       }

      function handleQueryResponse2(response2) {  
        var chart2 = new google.visualization.AreaChart(document.getElementById('chart2-container'));
        var data2 = response2.getDataTable();
        chart2.draw(data2, options2);

      }
    </script>
  </head>

  <body>

        <td><div id="chart-container" style="border: 1px solid #ccc"></div></td>
        <br>
        <td><div id="chart2-container" style="border: 1px solid #ccc"></div></td>
  </body>
</html>

Google Charts第二个数据覆盖第一个数据＆amp;图表

3 个答案: