使用Google脚本创建折线图-Google表格作为数据源

Question

嗨，有一个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

我希望开发一个网络脚本/谷歌脚本，以利用Google表格中的数据绘制折线图。 我不希望在应用程序脚本中构建数据表并构建图表，而是直接通过从Google工作表中获取数据来构建图表。

这是我开发的代码。

第一个代码-这是一个.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; }

第二文件-HTML。 文件名：index.html

代码如下。

 <!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>

不知道我在哪里弄错了。 当我尝试发布时，仪表板为空。 任何帮助都将不胜感激。

预期结果是

预期结果

Answer 1

在html中，您有一个id为"main"的div

<div id="main"></div>

但是，在javascript中，您尝试将图表绘制在ID = "curve_chart"的容器中

chart = new google.visualization.LineChart(document.getElementById("curve_chart"));

ID需要匹配

另外，建议清理html中的空白，
我也看到这也会引起问题

从...

<
div id = "main" > < /div>

至...

<div id="main"></div>

注意：与jsapi相比，建议使用loader.js加载库

根据发行说明 ...

可以通过jsapi加载程序保留的Google图表版本不再保持一致更新。 从现在开始，请使用新的gstatic loader.js 。

<script src="https://www.gstatic.com/charts/loader.js"></script>

这只会改变load语句...

google.charts.load('current', {
  packages: ['corechart', 'line']
});
google.charts.setOnLoadCallback(getSpreadsheetData);

使用Google脚本创建折线图-Google表格作为数据源

问题描述

1 个解决方案

解决方案1
1 2018-11-28 12:33:21

使用Google脚本创建折线图-Google表格作为数据源

问题描述

1 个解决方案

解决方案1 1 2018-11-28 12:33:21

解决方案1
1 2018-11-28 12:33:21