Question

通常我在Google电子表格中有数据，我想用google-visualization API代表它们。
我尝试从两个示例重现代码，但我失败了。
例1：datatables and dataview docs
示例2：how to use google spreadsheets docs

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

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

  function drawBasic() {

    function drawGID() {
    var queryString = encodeURIComponent('SELECT A, B');
    var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq=' + queryString);
      query.send(handleQueryResponse);
    }

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

      var data = reponse.getDataTable();

      var options = {
        title:'test',       
      }

      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
      chart.draw(data,options)
     }
   }

   </script>
  </head>
  <body>
    <h1> will it works </h1>
    <div id="chart_div"></div>
  </body>
</html>

Answer 1

有一个包含代码的函数drawGID，从未调用过，

删除那个......

编辑

更改了网址，也使用了setQuery，

另外，发现了拼写错误 - ＆gt; var data = reponse.getDataTable();

reponse应为response

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawBasic,
  packages: ['corechart', 'bar', 'table']
});

function drawBasic() {
  var query = new google.visualization.Query(
    'https://docs.google.com/spreadsheets/d/1FzvV_rh81koInXeZp6LfXmZb6YGwKDB3CU20RdVOfjc/edit#gid=0'
  );
  query.setQuery('SELECT A, B');
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var data = response.getDataTable();
  var options = {
    title: 'test'
  }

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(data, options)
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Answer 2

以下是Google图表API文档中quick start example后面的代码。还有其他解决方案，但这个解决方案非常易读。
请注意电子表格网址（edit#gid=0）的结尾，并查看google query langage的query.setQuery

语法

<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']}); 
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/edit#gid=0'
    );
    query.setQuery('SELECT A, B OFFSET 5'); //select specific cells from the table
    query.send(handleQueryResponse);
  }

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

    var data = response.getDataTable();
    var options = {
      title: 'glue data from spreadsheet',
      height : 250,
    }

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options)
  }
  </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

在google-visualization API中使用电子表格中的表格

2 个答案: