此页面介绍了如何在 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
。