javascript - 从 Google Sheet 查询制作 Google Annotation 图表

Question

我正在处理的谷歌注释图表遇到一些问题。我从 Google 提供的示例开始然后尝试通过 Fiddle 调整它以使用我的 google sheets document 查询中的数据.

我觉得我要么搞砸了查询本身，要么搞砸了将查询结果放入图表中并绘制它。

任何帮助将不胜感激。我的 JavaScript 包含在下面。

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


      function initialize() {
            var opts = {sendMethod: 'auto'};
  // Replace the data source URL on next line with your data source URL.
        var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1KVOMq2usUg-FRmfx9cnGgJVR-wQZ2oJcyufaIgcxzFw', opts);

  // Optional request to return only column C and the sum of column B, grouped by C members.
            query.setQuery('select B, select G');

  // Send the query with a callback function.
            query.send(handleQueryResponse);
}

            function handleQueryResponse(response) {

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

              var data = response.getDataTable();
        var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

        var options = {
          displayAnnotations: false
        };

        chart.draw(data, options);        
}

Answer 1

一些事情...

1. 指定的回调函数不存在
   将 -- drawChart 更改为 -- initialize
   (添加到下面的 load 语句中，而不是使用 -- setOnLoadCallback)
2. 选择列的查询不正确
   将 -- 选择 B、选择 G 更改为 -- 选择 B、G
   (添加到下面的网址而不是使用 -- query.setQuery)

<小时/>

请参阅以下工作片段...

google.charts.load('current', {
  callback: initialize,
  packages: ['annotationchart']
});

function initialize() {
  var opts = {sendMethod: 'auto'};
  // Replace the data source URL on next line with your data source URL.
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1KVOMq2usUg-FRmfx9cnGgJVR-wQZ2oJcyufaIgcxzFw/gviz/tq?tq=select B,G', opts);

  // Send the query with a callback function.
  query.send(handleQueryResponse);
}

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

  var data = response.getDataTable();
  var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

  var options = {
    displayAnnotations: false
  };

  chart.draw(data, options);
}

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