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

【问题标题】：Line Chart creation using google script - Google sheet as Data source使用谷歌脚本创建折线图 - 谷歌表作为数据源
【发布时间】：2018-11-28 10:04:55
【问题描述】：

你好有一个谷歌表格数据，其数据看起来像这样

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>

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

预期结果是

预期结果

【问题讨论】：

标签： javascript google-apps-script google-sheets google-visualization linechart

【解决方案1】：

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

<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 加载库，而不是jsapi

根据release notes...

通过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);

【讨论】：

希望对您有所帮助，您可以在浏览器的控制台中找到类似的错误，F12 在大多数...
亲爱的@WhiteHat，当我尝试发布时，它仍然是空的/空白的网页。不知道我在哪里弄错了。我根据您的建议进行了所有更正
我对数据源进行了更改。删除了我的日期列，并按 1、2、3、4 的顺序更改为 S.No。在更改后它起作用了。为什么我的代码将日期识别为我的 x 轴。
亲爱的@WhiteHat，在第一列中有日期的任何问题。一旦我将第一列从日期更改为序列号，我的代码就可以发布了。