如何使用 Apps 脚本自动生成自定义条形图，该条形图从 Google 表格中自动更新的 csv 文件中获取数据

Question

这是我尝试生成的示例草稿图

这是我 Google 驱动器中的文件

目前，我已经成功地自动生成了 Google 表格，其中的数据来自我的 Google 云端硬盘中的 CSV 文件。即使 CSV 文件被删除并替换为新文件，生成的 Google 表格中的数据也会更新，并且仅保留一张表格，而不是创建另一张表格。但现在，我希望进一步实现自动生成自定义（仅从更新的 Google 表格中获取 2 列数据）条形图，并将其生成为同一 Google 表格中的另一个选项卡。整个 Google 云端硬盘应该只包含一个 CSV 文件，以及一个具有相同名称的 Google 表格。

我在使用 Apps 脚本方面没有太多经验，这就是为什么我在尝试使用自动生成的图表时遇到问题的原因。我无法创建具有特定要求的自定义图表。目前，我什至无法在工作表内创建普通图表。请帮忙。

function createGraph() { 
      var data = 
 SpreadsheetApp.openById('17wjzTLFBML_iN4Arnx6vos1JrHAme3ukvGDaoBSCGw'); 
  var sheet = data.getSheets()[0];

  //create chart 
  //if chart created, this will update the existing chart
  if (sheet.getCharts().length > 0){
  var chart = sheet.getCharts()[0];
  chart = chart.modify()
  .removeRange(chart.getRanges()[0])
  .addRange(sheet.getRange("Y1:Y501"))
  .addRange(sheet.getRange("V1:V501"))
  .setOption('useFirstColumnAsDomain', true)
  .setOption('treatLabelsAsText', true)
  .setOption('applyAggregateData',0)
  .setNumHeaders(1)
  .setPosition(5, 6, 5, 5)
  .setOption("title", "Chart")
  .build()
  sheet.updateChart(chart)

}
else{

 //create new chart
var chart = sheet.newChart()
.setChartType(Charts.ChartType.COLUMN)
//.addRange(sheet.getRange("Y1:Y501"))
.addRange(sheet.getRange("V1:V501"))
.setMergeStrategy(Charts.ChartMergeStrategy.MERGE_ROWS)
.setOption('useFirstColumnAsDomain', true)
.setOption('applyAggregateData',0)
.setOption('treatLabelsAsText', true)
.setNumHeaders(1)
.setPosition(5, 6, 5, 5)
.setOption("title", "Chart")
.build()
sheet.insertChart(chart)

}

}

从 Google 表格中的数据来看，我希望只选取“条件”列和“案例类型 3”列和“所有者列”。其中图表 x 轴是条件，由所有者和案例类型 3 分隔。而图表 y 轴是数量。

Answer 1

关于无法创建正常图的第一个问题：

错误在于您的范围定义，正确的方法语法是： getRange(row, column, numRows, numColumns)，所以在你的情况下：

var range = sheet.getRange(startRow, startColumn,  sheet.getLastRow()-startRow+1, numOfColumns);

我看到您刚刚编辑了您的问题，但实际上除了这一行之外，编辑之前的代码是正确的。

至于创建类似于您使用 Tableau 所做的图表：

很遗憾，您无法在 Apps 脚本中构建简单的图表。您将需要使用 google visualization，您不能直接在 Apps 脚本中使用它，但必须将其嵌入到绑定到您的 Apps 脚本的 html 文件的一部分中。您将需要使用group() 函数，类似于他的情况：

Google Charts Data Grouping for column chart

一个简单的解决方法：

使用基于您的代码的简单 Apps 脚本图表构建最接近的事情是创建两个图表并将它们彼此相邻放置：

但是，您需要重组数据。对于分组功能，每个图表必须有“所有者”是 x 轴和 3 y 系列（对于每个条件） - 您可以在上面的 sn-p 中看到它的方式。您需要在代码中调整的所有内容（编辑前的代码）就是范围大小，以确保包含一个图表的所有数据列。 此外，如果您希望列是垂直的，就像在您的 sn-p 中一样，而不是水平的 - 您正在谈论的是柱形图而不是条形图。根据您的代码，这里有一个可能的解决方案：

 function createGraph() {
    var sheet = SpreadsheetApp.getActiveSheet() // You can replace this with gettingSheetbyName()
       // Read variables
       var startRow1 = 13;  // What row to start reading at
       var startColumn1 = 8;  // What column to start reading
       var startRow2 = 13;  // What row to start reading at
       var startColumn2 = 13;  // What column to start reading  
       var numOfColumns = 4;  // Number of columns to read   
     // Graph variables
        var posX1 = 6;  // Column to anchor graph to
        var posX2 = 12;  // Column to anchor graph to
        var posY = 16;  // Row to anchor graph to
        var width = 600; // Graph Width
        var xTitle = 'Condition'; // XAxis Title
        var yTitle = 'Number of Records'; // YAxis Title
        var chartType = Charts.ChartType.COLUMN; // Chart Type
        var range1 = sheet.getRange(startRow1, startColumn1,  sheet.getLastRow()-startRow1+1, numOfColumns);
        var range2 = sheet.getRange(startRow2, startColumn2,  sheet.getLastRow()-startRow2+1, numOfColumns);

        var chart1 = sheet.getCharts()[0];
        var chart2 = sheet.getCharts()[0];

 //If charts already exist, update them
   if (chart1){
     chart1.modify()
     .removeRange(chart1.getRanges()[0])
     .addRange(range1)
     .setPosition(posY, posX1, 0, 0)
     .setOption('width', width)
     .setOption('vAxis.title', yTitle)
     .setOption('hAxis.title', xTitle)
     .setChartType(chartType)
     .build();
     sheet.updateChart(chart1);
   }
    //If not, create them
   else {
     var chart1 = sheet.newChart();
     chart1.addRange(range1)
     .setPosition(posY, posX1, 0, 0)
     .setOption('title', 'Out of Box Failure')
     .setOption('width', width)
     .setOption('vAxis.title', yTitle)
     .setOption('hAxis.title', xTitle)
     .setChartType(chartType);
     sheet.insertChart(chart1.build());
   }
    //If charts already exist, update them
   if (chart2){
     chart2.modify()
     .removeRange(chart2.getRanges()[0])
     .addRange(range2)
     .setPosition(posY, posX2, 0, 0)
     .setOption('width', width)
     .setOption('vAxis.title', yTitle)
     .setOption('hAxis.title', xTitle)
     .setChartType(chartType)
     .build();
     sheet.updateChart(chart2);
   }
    //If not, create them
   else {
     var chart2 = sheet.newChart();
     chart2.addRange(range2)
     .setPosition(posY, posX2, 0, 0)
     .setOption('title', 'Deliver quality')
     .setOption('width', width)
     .setOption('vAxis.title', yTitle)
     .setOption('hAxis.title', xTitle)
     .setChartType(chartType);
     sheet.insertChart(chart2.build());
   }

 }

如果这对您来说还不够，您需要更深入地了解 Google 可视化的实施。上面链接的快速入门应该可以让您很好地了解如何使用它。