此页面介绍了如何在 Google 电子表格中使用 Google 图表。
简介
Google 图表和 Google 电子表格紧密集成。您可以在 Google 电子表格中放置 Google 图表，之后 Google 图表可以从 Google 电子表格中提取数据。本文档将向您介绍如何执行这两个操作。
无论您选择哪种方法，图表都会随着基础电子表格的变化而变化。
在电子表格中嵌入图表
在电子表格中添加图表非常简单。从电子表格工具栏中，依次选择“插入”和“图表”，然后您就可以选择图表类型并选择各种选项：
使用单独的电子表格创建图表
通常情况下，用户需要填充数据表并使用这些数据绘制图表，从而创建 Google 图表。如果您想从 Google 电子表格中检索数据，则需要对该电子表格执行查询，以检索要绘制成图表的数据：
function drawChart() {
var query = new google.visualization.Query(URL);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
chart.draw(data, null);
}
这是因为 Google 电子表格支持使用 Google 图表查询语言对数据进行排序和过滤；所有支持查询语言的系统都可用作数据源。
请注意，未经明确授权，图表不能使用查看图表的人员的权限。该电子表格必须向所有人显示，或者相应页面必须明确获取最终用户凭据（如本页面的授权部分所述）。
要将 Google 电子表格用作数据源，您需要提供其网址：
- 打开现有电子表格。此电子表格应采用可视化图表所需的格式，并且应正确设置查看权限。（查看“在网络上公开”或“知道链接的任何人”的权限最为简单，并且本部分中的说明假定已通过这种方式设置了电子表格。您可以将电子表格保持为“不公开”状态，并授予个别 Google 帐号访问权限，但您需要按照以下授权说明操作。
- 从浏览器中复制网址。 如需详细了解如何选择特定范围，请参阅查询来源范围。
- 提供
google.visualization.Query()的网址。 该查询支持以下可选参数：headers=N：指定有多少行是标题行，其中 N 是一个大于或等于零的整数。这些数据将从数据中排除，并在数据表中作为列标签分配。如果您未指定此参数，电子表格会猜测有多少行是标题行。请注意，如果所有列都是字符串数据，则电子表格可能很难确定哪些行是不带此参数的标题行。gid=N：指定要链接到多页文档中哪个工作表（如果您没有链接到第一个工作表）。N 是工作表的 ID 编号。如需了解该 ID 编号，请前往该工作表的已发布版本，然后在网址中查找gid=N参数。您还可以使用sheet参数来代替此参数。问题：在浏览器中查看时，Google 电子表格可能会重新排列网址中的 gid 参数；如果从浏览器中复制，请确保所有参数都位于网址的#标记之前。示例：gid=1545912003。sheet=sheet_name：如果您没有链接到第一个工作表，请指定您要链接到多工作表文档中的哪个工作表。sheet_name 是工作表的显示名称。示例：sheet=Sheet5。
完整示例如下：
以下是绘制此图表的两种方法，一种使用 gid 参数，另一种使用 sheet 参数。在浏览器中输入任一网址都会为图表生成相同的结果/数据。
function drawGID() {
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/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?gid=0&headers=1&tq=' + queryString);
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.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, { height: 400 });
}
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/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?sheet=Sheet1&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.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, { height: 400 });
}
查询来源范围
查询来源网址指定要在查询中使用的电子表格部分：特定单元格、单元格范围、行或列，或者整个电子表格。请使用“range=<range_expr>”语法指定范围，例如：
https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?range=A1:C4
以下是演示语法的一些示例：
A1:B10- 范围为单元格 A1 到 B105:7- 第 5-7 行D:F- 列 D-FA:A70- A 列中的前 70 个单元格-
A70:A- 第 70 行至末尾的列 A B5:5- B5 到第 5 行的末尾D3:D- D3 至 D 列末尾C:C10- 从 C 列的开头到 C10
授权
Google 表格要求最终用户凭据通过 Google 可视化 API（“/tq 请求”）访问私有电子表格。注意：共享到“知道链接的任何人都可以查看”的电子表格不需要凭据。更改电子表格的共享设置比实施授权容易得多。
如果链接共享不是可行的解决方案，开发者需要更改其代码，以传入针对 Google Sheets API 范围 (https://www.googleapis.com/auth/spreadsheets) 授权的 OAuth 2.0 凭据。
如需详细了解 OAuth 2.0 的背景信息，请参阅使用 OAuth 2.0 访问 Google API。
示例：使用 OAuth 访问 /gviz/tq
前提条件：从 Google Developers Console 获取客户端 ID
如需了解如何与 Google 的 Identity Platform 集成，请参阅 Google 登录和创建 Google API 控制台项目和客户端 ID。
要为最终用户获取 OAuth 令牌，您必须先在 Google Developers Console 中注册您的项目并获取客户端 ID。
- 在开发者控制台中，创建一个新的 OAuth 客户端 ID。
- 选择 Web 应用作为应用类型。
- 选择任意名称，该名称仅供您自己参考。
- 将您的域名（以及任何测试网域）添加为已获授权的 JavaScript 来源。
- 将已获授权的重定向 URI 留空。
点击“创建”后，复制客户端 ID 供日后参考。本练习不需要客户端密钥。
请更新您的网站以获取 OAuth 凭据。
Google 提供了 gapi.auth 库，该库大大简化了获取 OAuth 凭据的过程。以下代码示例使用此库获取凭据（如有必要，可请求授权）并将生成的凭据传递给 /gviz/tq 端点。
<html> <body> <button id="authorize-button" style="visibility: hidden">Authorize</button> <script src="./demo.js" type="text/javascript"></script> <script src="https://apis.google.com/js/auth.js?onload=init"></script> </body> </html>demo.js
// NOTE: You must replace the client id on the following line.
var clientId = '549821307845-9ef2xotqflhcqbv10.apps.googleusercontent.com';
var scopes = 'https://www.googleapis.com/auth/spreadsheets';
function init() {
gapi.auth.authorize(
{client_id: clientId, scope: scopes, immediate: true},
handleAuthResult);
}
function handleAuthResult(authResult) {
var authorizeButton = document.getElementById('authorize-button');
if (authResult && !authResult.error) {
authorizeButton.style.visibility = 'hidden';
makeApiCall();
} else {
authorizeButton.style.visibility = '';
authorizeButton.onclick = handleAuthClick;
}
}
function handleAuthClick(event) {
gapi.auth.authorize(
{client_id: clientId, scope: scopes, immediate: false},
handleAuthResult);
return false;
}
function makeApiCall() {
// Note: The below spreadsheet is "Public on the web" and will work
// with or without an OAuth token. For a better test, replace this
// URL with a private spreadsheet.
var tqUrl = 'https://docs.google.com/spreadsheets' +
'/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq' +
'?tqx=responseHandler:handleTqResponse' +
'&access_token=' + encodeURIComponent(gapi.auth.getToken().access_token);
document.write('<script src="' + tqUrl +'" type="text/javascript"></script>');
}
function handleTqResponse(resp) {
document.write(JSON.stringify(resp));
}
授权成功后，gapi.auth.getToken() 将返回所有凭据详细信息，包括可附加到 /gviz/tq 请求的 access_token。
如需详细了解如何使用 gapi 库进行身份验证，请参阅：
使用 drive.file 范围
上面的示例使用 Google Sheets API 范围，该范围会授予对用户所有电子表格内容的读写权限。根据具体应用，这可能过于宽松。对于只读权限，请使用 spreadsheets.readonly 范围，该范围授予对用户工作表及其属性的只读权限。
drive.file 范围 (https://www.googleapis.com/auth/drive.file) 仅授予对用户通过 Google 云端硬盘文件选择器（通过选择器 API 明确打开）打开的文件的访问权限。
使用选择器会更改应用的流程。用户必须使用“选择器”对话框选择希望您的网页访问的电子表格，而不是粘贴网址或拥有如上例所示的硬编码电子表格。请遵循选择器“Hello World”示例，使用 google.picker.ViewId.SPREADSHEETS 代替 google.picker.ViewId.PHOTOS。