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为{checkbox的div

"main"

但是，在JavaScript中，您试图将图表绘制在ID = {<div id="main"></div>

的容器中

"curve_chart"

id需要匹配

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

来自...

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

到...

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

注释：建议使用<div id="main"></div>来加载库，而不是loader.js

根据release notes ...

通过jsapi加载程序仍然可用的Google Charts版本不再被一致更新。从现在开始，请使用新的静态jsapi。

loader.js

这只会更改<script src="https://www.gstatic.com/charts/loader.js"></script>语句...

load

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

1 个答案: