本页介绍了如何使用带有 Google 电子表格的 Google 图表。
简介
Google 图表与 Google 电子表格紧密集成。您可以将 Google 图表放入 Google 电子表格中,并且 Google 图表可以从 Google 电子表格中提取数据。本文档将向您介绍如何执行这两个操作。
无论您选择哪种方法,只要底层电子表格发生变化,您的图表都会随之更改。
将图表嵌入电子表格中
在电子表格中添加图表非常简单。在电子表格工具栏中,依次选择“插入”和“图表”,您可以选择图表类型并选择各种选项:
![](https://developers.google.cn/static/chart/interactive/images/chart_spreadsheet.png?authuser=9&hl=ca)
通过单独的电子表格创建图表
通常,用户通过填充数据表并使用这些数据绘制图表来创建 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 为 0 或更大的整数。 它们将从数据中排除,并作为数据表中的列标签分配。如果您未指定此参数,电子表格将猜测有多少行是标题行。 请注意,如果您的所有列都是字符串数据,则在没有此参数的情况下,电子表格可能难以确定哪些行是标题行。gid=N
:指定要链接到多工作表文档中的哪个工作表(如果您未链接到第一个工作表)。 N 是工作表的 ID 编号。您可以前往该工作表的已发布版本并在网址中查找gid=N
参数,以了解 ID 编号。您也可以用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”range_expr> 语法指定范围,例如:
https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?range=A1:C4
以下是演示语法的几个示例:
A1:B10
- 从单元格 A1 到 B10 的范围5:7
- 第 5-7 行D:F
- D-F 列A:A70
- A 列中的前 70 个单元格-
A70:A
- A 列(从第 70 行到末尾) B5:5
- B5 到第 5 行末尾D3:D
- D3 到 D 列末尾C:C10
- 从 C 列的开头到 C10
授权
Google 表格需要最终用户凭据才能通过 Google Visualization 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 Developer Console 获取客户端 ID
如需更详细地了解如何与 Google 的 Identity Platform 集成,请参阅 Google 登录和创建 Google API 控制台项目和客户端 ID。
要获取最终用户的 OAuth 令牌,您必须先在 Google Developer 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 云端硬盘文件选择器(通过 Picker API 启动)显式打开的文件的访问权限。
使用 Picker 会更改应用的流程。用户必须使用“选择器”对话框来选择希望您的网页访问哪个电子表格,而不是粘贴网址或使用上述示例中的硬编码电子表格。请参照选择器“Hello World”示例,使用 google.picker.ViewId.SPREADSHEETS
代替 google.picker.ViewId.PHOTOS
。