Question

如何使用Google电子表格中的数据制作Google图表？我尝试了下面链接的示例，但它对我不起作用。我想通过将代码放在html中将图表放入网站。我想主要使用饼图，但希望能够使用其他图表选项，如条形图和甜甜圈图表。我发现的所有信息都没有显示如何从谷歌电子表格或融合表中提取数据。

Creating a Chart from a Seperate Spreadsheet

Querying a Fusion Table

我尝试使用代码在网站中插入图表：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Excel Pull Test</title>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    function drawSheetName() {
    var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');

    var query = new google.visualization.Query(
    'https://docs.google.com/spreadsheets/d/1_2QRYLFsUqr6tAri8HWx9QArWclkbzmgfjLYO0Bnosg/edit?usp=sharing' + queryString);
      query.send(handleSampleDataQueryResponse);
    }

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

    var chart = new     google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
  </script>
</head>

<body>
  <div id="chart_div"></div>
</body>
</html>

我没有收到任何错误。当我在我的broswer中加载带有此代码的页面时，它完全是空白的。关于这个问题的一些想法是它可能无法正确地从谷歌电子表格中提取代码。我将电子表格权限设置为“有链接的任何人”可以查看。我使用的代码设置为将信息显示为表格，而不是饼图或其他任何内容。我也没有完全理解查询字符串。我试图选择的范围是A1：B7，第1行是标题行。我没有从原始脚本中更改它，只是从其中一个示例中添加了html。

Answer 1

由于您的data变量未在函数handleSampleDataQueryResponse(response)中定义，因此您收到空响应。尝试做类似的事情：

var data = response.getDataTable();

在chart.draw之前显示here。这应该使用所需的数据填充您的图表。

Answer 2

问题在于Google Visualization API没有被加载，一旦加载就没有设置回调，并且数据变量没有被识别。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Excel Pull Test</title>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">

  google.load('visualization', '1.0', {'packages':['corechart']});

  google.setOnLoadCallback(drawSheetName);

   function drawSheetName() {
      var queryString = encodeURIComponent('SELECT A:B7');

      var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheets/d/1_2QRYLFsUqr6tAri8HWx9QArWclkbzmgfjLYO0Bnosg/edit#gid=0&headers=1&tq=' + queryString);
      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.PieChart(document.getElementById('chart_div'));
  chart.draw(data, { height: 400 });
    }
  </script>
</head>

<body>
  <div id="chart_div"></div>
</body>
</html>

带有电子表格的Google Charts

2 个答案: