尝试从谷歌电子表格中获取数据以用于谷歌图表时出错
[英]Error trying to get data from a google spreadsheet to use in google Charts
问题描述
I'm trying to use a query to get data from a google spreadsheet to populate a chart using Google Charts.
我正在尝试使用查询从谷歌电子表格中获取数据，以使用谷歌图表填充图表。 But when I launch the html file I'm getting these errors:但是，当我启动 html 文件时，出现以下错误：
Here's the code:这是代码：
<html> <head> <:--Load the AJAX API--> <script type="text/javascript" src="https.//www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // 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 drawChart() { var query = new google.visualization:Query( 'https.//docs.google?com/spreadsheets/d/1wi2ZfL8_G7gNPGmNpQ347QVEICddJ3Jsmye5k8MvIHY/gviz/tq;gid=0'). 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')): // Set chart options var options = {'title','Test': 'width',500: 'height';300}. chart,draw(data; options); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
1 个解决方案
解决方案1
1 2023-01-12 18:40:50
The problem is that Google Charts is trying to access a private spreadsheet without authorization.问题是 Google Charts 试图在未经授权的情况下访问私人电子表格。 This is explained in the documentation on how to use Sheets with Charts:这在关于如何将表格与图表一起使用的文档中进行了解释：
Note that charts cannot use the privileges of the person viewing them without explicit authorization.
This means that you have to either set the spreadsheet to at least viewable to anyone with the link, or public.这意味着您必须将电子表格设置为至少对拥有链接的任何人可见，或者设置为公开。 Alternatively, you can get an access token from the user and pass it in the URL with the ?access_token= parameter.或者，您可以从用户那里获取访问令牌，并使用?access_token=参数将其传递到 URL。 The user will need at least view access to the sheet.用户至少需要查看工作表的权限。
If this is an Apps Script Web App , you could use your own token in anHTML Template after deploying the app to display the chart.如果这是 Apps Script Web App ，您可以在部署应用程序以显示图表后在HTML 模板中使用您自己的令牌。 Might look like this:可能看起来像这样：
Code.gs代码.gs
var ACCESS_TOKEN = ScriptApp.getOAuthToken()
function doGet(e) {
return HtmlService.createTemplateFromFile("index").evaluate()
}
// SpreadsheetApp.getActiveSpreadsheet() // just to generate a token with the sheet scopes
The above builds a template and sends your access token within the ACCESS_TOKEN variable.上面构建了一个模板并在ACCESS_TOKEN变量中发送您的访问令牌。 Then you can change the drawChart() function in your HTML file to add the token to the URL:然后，您可以更改 HTML 文件中的drawChart() function 以将令牌添加到 URL：
HTML file: HTML 档案：
function drawChart() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/<id>/edit?access_token='+encodeURIComponent(<?=ACCESS_TOKEN?>));
query.send(handleQueryResponse)
}
Note that this is dangerous , because it exposes your access token in the Web App.请注意，这是危险的，因为它会在 Web 应用程序中公开您的访问令牌。 Take it only as an example of how to retrieve your own token within Apps Script.仅以此为例说明如何在 Apps 脚本中检索您自己的令牌。 If you're trying to display the chart within a modal window in a Sheet, then it would use the current user's credentials, which is safer.如果您尝试在工作表中的模式 window 中显示图表，那么它会使用当前用户的凭据，这样更安全。
The easiest way is to make the Sheet public, but if you want to authorize the user in the same page you will need to create your own project to get a client ID and follow additional steps which are too long to post here but you can check out the documentation page.最简单的方法是公开工作表，但如果您想在同一页面中授权用户，您需要创建自己的项目以获取客户端 ID 并执行其他步骤，这些步骤太长而无法在此处发布，但您可以查看出文档页面。
References:参考：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.