【问题标题】：Google visualization Script IssuesGoogle 可视化脚本问题
【发布时间】：2016-06-29 01:16:28
【问题描述】：

我正在尝试创建一个仪表板来表示我在谷歌电子表格中的一些数据，并且我尽可能地遵循了谷歌图表指南（我不是程序员）。我想出了下面不工作的脚本，我需要一些帮助来让它工作。

这是我的电子表格的链接： https://docs.google.com/spreadsheets/d/1L2wjSj0IYSrA-dwYYly6rjmtw_zMCB6l7FB5B-rcvZc/edit#gid=1303777890

我试图显示为柱形图的数据位于 Sheet2 (Data2) 列 D 和 E（突出显示）中，我将该范围添加到 url 查询“range=D:E”

我想出的代码如下。我只是想让它显示图表。任何帮助表示赞赏。

enter code here<html>

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

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

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

function drawSheetName() {
  var queryString = encodeURIComponent('SELECT D, E');

  var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheets/d/1L2wjSj0IYSrA-dwYYly6rjmtw_zMCB6l7FB5B-rcvZc/edit#gid=1303777890range=D:E');
  query.send(handleSampleDataQueryResponse);
}

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

  var data = response.getDataTable();
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, { height: 400 });
}
}

【问题讨论】：

标签： google-apps-script google-sheets

【解决方案1】：

我想我找到了问题所在。

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

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

function drawSheetName() {
  var queryString = encodeURIComponent('SELECT D, E');

  var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheets/d/1L2wjSj0IYSrA-dwYYly6rjmtw_zMCB6l7FB5B-rcvZc/edit#gid=1303777890range=D:E');
  query.send(handleSampleDataQueryResponse);
}

您使用了drawSheetName()，但没有在google.charts.setOnLoadCallback() 中调用它。

代码修订

google.charts.setOnLoadCallback(drawSheetName)

那么对于

var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheets/d/1L2wjSj0IYSrA-dwYYly6rjmtw_zMCB6l7FB5B-rcvZc/edit#gid=1303777890range=D:E');

将格式改为

var query = new google.visualization.Query(
            'https://docs.google.com/spreadsheets/d/ID/gviz/tq?tq='+queryString);

查询语言参考

Google Visualization API 查询语言让您可以通过查询数据源来执行各种数据操作。

Setting the Query in the Data Source URL

可以使用tq 参数将查询字符串添加到数据源URL。在 URL 参数中而不是在 JavaScript 中设置查询可以让您轻松使用其他开发人员编写的可视化，并且仍然可以自定义查询。

查询字符串必须正确编码为 URL 参数。您可以使用 JavaScript encodeURIComponent 函数对 URL 进行编码，也可以使用本节末尾的编码工具手动对其进行编码。

如需更多信息和示例：

Google Chart Quick Start

【讨论】：