时间戳

首页 > 解决方案 > 使用谷歌脚本创建折线图 - 谷歌表作为数据源

javascript - 使用谷歌脚本创建折线图 - 谷歌表作为数据源

问题描述

嗨有一个谷歌表数据，其数据如下所示

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

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

这是我开发的代码。

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

不知道我在哪里弄错了。当我尝试发布时，仪表板是空的。非常感谢任何形式的帮助。

预期结果是

预期结果

标签： javascriptgoogle-apps-scriptgoogle-sheetsgoogle-visualizationlinechart

解决方案

在 html 中，你有一个 id ="main" 

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

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

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

ids需要匹配

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

从... 

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

至... 

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

注意：推荐使用loader.js加载库，vs。jsapi

根据发行说明...

通过jsapi加载程序仍然可用的 Google Charts 版本不再持续更新。请从现在开始使用新的 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);

推荐阅读