使用Google脚本创建折线图-Google表格作为数据源
[英]Line Chart creation using google script - Google sheet as Data source
问题描述
Hi Have a google sheet data whose data looks like this 
嗨，有一个Google工作表数据，其数据如下所示
DATE LSL LCL DATA UCL USL 16 - Nov - 2018 1 3 2.3 7 9 17 - Nov - 2018 1 3 3.1 7 9 18 - Nov - 2018 1 3 2.7 7 9 19 - Nov - 2018 1 3 4.9 7 9 20 - Nov - 2018 1 3 5 7 9 21 - Nov - 2018 1 3 3 7 9 22 - Nov - 2018 1 3 10 7 9 23 - Nov - 2018 1 3 7.8 7 9 24 - Nov - 2018 1 3 4.5 7 9 25 - Nov - 2018 1 3 5.4 7 9 26 - Nov - 2018 1 3 2.2 7 9 27 - Nov - 2018 1 3 4.9 7 9 28 - Nov - 2018 1 3 5.8 7 9 29 - Nov - 2018 1 3 4.9 7 9
I wish to develop a web script/google script to draw a line chart making use of the data from a google sheet. 我希望开发一个网络脚本/谷歌脚本，以利用Google表格中的数据绘制折线图。 I dont wish to construct a data table in the app script and build the chart but rather build the chart directly by sourcing the data from the google sheet. 我不希望在应用程序脚本中构建数据表并构建图表，而是直接通过从Google工作表中获取数据来构建图表。
This is the code i developed. 这是我开发的代码。
1st code - which is a .gs file - FILE NAME : Code.gs 第一个代码-这是一个.gs文件-文件名：Code.gs
function doGet(e) { return HtmlService .createTemplateFromFile("index") .evaluate() .setTitle("Google Spreadsheet Chart") .setSandboxMode(HtmlService.SandboxMode.IFRAME); } function getSpreadsheetData() { var ssID = "1WFV48PNNGw9Pvrj9dQ1vYD-kF1zvxMo_02VIbKBYicQ", sheet = SpreadsheetApp.openById(ssID).getSheets()[0], data = sheet.getDataRange().getValues(); return data; }
2nd FIle - HTML. 第二文件-HTML。 File Name: index.html 文件名：index.html
Code as below. 代码如下。
<!DOCTYPE html> <html> <head> <script src="https://www.gstatic.com/charts/loader.js"></script> </head> <body> <div id="main"></div> <script> google.charts.load('current', { packages: ['corechart', 'line'] }); google.charts.setOnLoadCallback(getSpreadsheetData); function getSpreadsheetData() { google.script.run.withSuccessHandler(drawChart).getSpreadsheetData(); } function drawChart(rows) { var options = { title: 'Line Chart', legend: 'none', chartArea: { width: '60%' }, vAxis: { textStyle: { fontFamily: 'Arial', fontSize: 12 } } }; var data = google.visualization.arrayToDataTable(rows, false), chart = new google.visualization.LineChart(document.getElementById("main")); chart.draw(data, options); } </script> </body> </html>
Not sure where i am getting it wrong. 不知道我在哪里弄错了。 When i try to publish, the dashboard is empty. 当我尝试发布时，仪表板为空。 Any sort of help is much appreciated. 任何帮助都将不胜感激。
Expected outcome is 预期结果是
Expected Result 预期结果
1 个解决方案
解决方案1
1 2018-11-28 12:33:21
in the html, you have a div with id = "main" 在html中，您有一个id为"main"的div
<div id="main"></div>
however, in the javascript, you're trying to draw the chart in a container with id = "curve_chart" 但是，在javascript中，您尝试将图表绘制在ID = "curve_chart"的容器中
chart = new google.visualization.LineChart(document.getElementById("curve_chart"));
the ids need to match ID需要匹配
also, recommend cleaning up the white space in the html, 另外，建议清理html中的空白，
i've seen this cause problems as well 我也看到这也会引起问题
from... 从...
<
div id = "main" > < /div>
to... 至...
<div id="main"></div>
note : recommend using loader.js to load the library, vs. jsapi 注意 ：与jsapi相比，建议使用loader.js加载库
according to the release notes ... 根据发行说明 ...
The version of Google Charts that remains available via the
jsapiloader is no longer being updated consistently.jsapi加载程序保留的Google图表版本不再保持一致更新。 Please use the new gstaticloader.jsfrom now on.loader.js。
<script src="https://www.gstatic.com/charts/loader.js"></script>
this will only change the load statement... 这只会改变load语句...
google.charts.load('current', {
packages: ['corechart', 'line']
});
google.charts.setOnLoadCallback(getSpreadsheetData);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.