代码修订

Question

我正在尝试创建一个信息中心来表示我在谷歌电子表格中的一些数据，我尽可能地遵循谷歌图表指南（我不是程序员）。我已经提出了下面的脚本无法正常工作，我希望能帮助它发挥作用。

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

我试图以柱形图显示的数据位于Sheet2（Data2）列D和E（突出显示）中，我将该范围添加到网址查询“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 });
}
}

Answer 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函数对网址进行编码，也可以使用本节末尾的编码工具手动对其进行编码。

有关其他信息和样本：

Google Chart Quick Start

Google可视化脚本问题

1 个答案:

代码修订

查询语言参考