Question

我想创建一个简单的网络应用，用于查询我的Google电子表格并制作匹配查询的列图。我可以从我的电子表格 [像这样] [1] 中制作一个柱状图，这显然可以绘制整个工作表。我想在同一页面上放置一个搜索框，以查询我的电子表格的第一列。最后，我想从匹配的结果中制作图表。感谢。

  [1]: https://jsfiddle.net/prp291/cLrze1bj/

Answer 1

更改了表格图表...

google.visualization.Table

到...

google.visualization.ColumnChart

和来自......的包裹

packages:['table']

到...

packages:['corechart']

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

＆＃13;

 
  google.charts.load('current', {
   callback: function () {
   document.getElementById('Search').addEventListener('click', searchSheet, false);
   searchSheet();

    function searchSheet() {
      searchText = document.getElementById('Name').value;

      var queryWORK = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=1y5MgFR67kn1-GHbmeIi6wuC5hmP10x4O8vAs5RWD8Sw&sheet=QUERY');
      
if (searchText !== '') {
        queryWORK.setQuery('select * where A = "' + searchText + '"');
      }

      queryWORK.send(function (response) {
        if (response.isError()) {
          console.log('Error in ID Validation Query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }

        var datatable = response.getDataTable();
        for (var i = 0; i < datatable.getNumberOfColumns(); i++) 

        var chart = new google.visualization.ColumnChart(document.getElementById('table_div'));
        chart.draw(datatable);
      });
    }
  },
  packages:['corechart']
});

＆＃13;

   <script src="https://www.gstatic.com/charts/loader.js"></script>


<div><label for="Name">Enter Name: </label><input id="Name" type="text" value="Search box" /></div>
<div><input id="Search" type="button" value="Search" /></div>
<div id="table_div"></div>

＆＃13;

Answer 2

从Google表格电子表格构建基于网络的图表的一种方法是使用RGraph连接器。这样，您可以将数据直接导入到网页中并使用它制作图表（这是canvas文档页面，但它也同样适用于SVG图表）：

https://www.rgraph.net/canvas/docs/import-data-from-google-sheets.html

如何查询谷歌电子表格来创建谷歌图表

2 个答案: