google-apps-script - 以 PNG 格式保存到云端硬盘的 Google 表格图表的透明背景

Question

我在尝试将具有透明背景的图表保存到云端硬盘时遇到了一些问题。我可以.setOption('backgroundColor', 'transparent');，但这并没有设置图表所在“容器”的背景，因此图表仍然显示为具有白色背景。

有谁知道如何引用和设置图表所在容器的背景颜色？

谢谢尼克

function saveChartstoGdrive(){
  //Getting chart from the current spreadsheet
  var targetspreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = targetspreadsheet.getSheetByName('Sales Graph');
  var charts = sheet.getCharts();         
  var chartBlobs=new Array(charts.length);
  var filePrefix="scrlxz";
  
  //loop through charts saving each to gdrive
  for(var i=0;i<charts.length;i++){
    
    //build each chart
    var builderChart = charts[i].modify();
    builderChart.setOption('width', 1400);
    builderChart.setOption('height', 900);
    builderChart.setOption('title', 'Updated!');
    builderChart.setOption('backgroundColor', 'transparent');
    var newChart =builderChart.build();
  
    //create PNG blob of chart for writing
    chartBlobs[i]= newChart.getAs('image/png');
    
    
    //make sure we have the correct file and prepare for saving
    var fileName = filePrefix+[i]+".png";
    var fileId = DriveApp.getFilesByName(fileName).next().getId();
    var contentBlob = chartBlobs[i];
    
    //save file to ggdrive
    var myVar = Drive.Files.update({mimeType: 'image/png'}, fileId, contentBlob);
  }         
}

标签： google-apps-scriptchartsgoogle-sheetsgoogle-visualization

Answer 1

我相信你的目标如下。

• 您想用透明背景修改工作表上的图表。
• 您希望将修改后的图表导出为具有透明背景的 PNG 文件。
• 您想使用 Google Apps 脚本实现此目的。

修改点：

• 最近，我报道了使用 Google Apps Script 创建带有 Alpha 通道的 PNG 图像。当我看到你的问题时，我认为这份报告可能有用。该报告的流程用于您的情况，如下所示。

  1. 检索图表并修改图表。
  2. 更新图表。
  3. 创建新的 Google 幻灯片作为临时文件。
  4. 将幻灯片的背景颜色更改为透明。
  5. 插入修改后的图表。图表的背景颜色是透明的。
  6. 将幻灯片导出为带有 Alpha 通道的 PNG。
  7. 图表将返回到原始图表。
  8. 删除临时文件。
  9. 将导出的 PNG 数据创建为文件。在这种情况下，当文件存在时，文件将被覆盖。当找不到文件时，将文件创建为新文件。

• 而且，当我看到你的脚本时，现有图表被修改为透明背景。所以你从var newChart =builderChart.build();. 在这种情况下，我发现修改后的图表仍然没有反映到newChart. 因此，在这个修改后的脚本中，图表由修改后的图表更新。并且，在检索到更新的图表后，该图表将返回到原始图表。

• 而且，在这个修改后的脚本中，当文件fileName存在时，文件会被新图表覆盖。当未找到文件时，将使用新图表作为新文件创建文件。

当以上几点反映到您的脚本时，它变成如下。

修改后的脚本：

请将以下脚本复制并粘贴到 Google 电子表格的脚本编辑器中。并且，此脚本假定工作表“销售图表”具有图表。请注意这一点。并且，请再次确认 Drive API 是否已经在 Advanced Google services 中启用。

function saveChartstoGdrive() {
  var targetspreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = targetspreadsheet.getSheetByName('Sales Graph');
  var charts = sheet.getCharts();
  var chartBlobs = new Array(charts.length);
  var filePrefix = "scrlxz";
  for (var i = 0; i < charts.length; i++) {
    // 1. Retrieve chart and modify chart.
    var orgChart = charts[i]; // Added
    var builderChart = charts[i].modify();
    builderChart.setOption('width', 1400);
    builderChart.setOption('height', 900);
    builderChart.setOption('title', 'Updated!')
    builderChart.setOption('backgroundColor', 'transparent');
    var newChart = builderChart.build();

    // --- I added below script.
    // 2. Update chart.
    sheet.updateChart(newChart); // It seems that this is required to be used for reflecting the settings.

    // 3. Create new Google Slides as the temporal file.
    var temp = SlidesApp.create("temp");
    var slide = temp.getSlides()[0];
    var id = temp.getId();
    slide.getShapes().forEach(s => s.remove());

    // 4. Change the background color of slide to the transparent.
    slide.getBackground().setTransparent();

    // 5. Insert the modified chart. The background color of chart is the transparent.
    slide.insertSheetsChart(newChart);
    temp.saveAndClose();

    // 6. Export the slide as PNG with the alpha channel.
    var url = `https://docs.google.com/feeds/download/presentations/Export?id=${id}&exportFormat=png`;
    var blob = UrlFetchApp.fetch(url, {headers: {authorization: "Bearer " + ScriptApp.getOAuthToken()}}).getBlob();

    // 7. The chart is returned back to the original one.
    sheet.updateChart(orgChart); // Here, the updated chart is returned back to the original one.
    
    // 8. Remove the temporal file.
    DriveApp.getFileById(id).setTrashed(true);

    // --- I modified below script.
    // 9. Create the exported PNG data as a file. In this case, when the file is existing, the file is overwritten. When the file is not found, the file is created as new file.
    chartBlobs[i] = blob;
    var fileName = filePrefix + [i] + ".png";
    var contentBlob = chartBlobs[i];
    var file = DriveApp.getFilesByName(fileName);
    if (file.hasNext()) {
      var fileId = file.next().getId();
      var myVar = Drive.Files.update({ mimeType: 'image/png' }, fileId, contentBlob);
    } else {
      DriveApp.createFile(contentBlob.setName(fileName));
    }
  }
}

结果：

为以下工作表运行上述脚本时，将获得具有 alpha 通道的 PNG 文件。

为了确认PNG文件的透明背景，作为一个例子，当创建的PNG文件插入到电子表格时，它变成如下。您可以看到图像的背景是透明的。

参考：

• 报告：使用 Google Apps 脚本创建带有 Alpha 通道的 PNG 图像
• 类表的updateChart(chart)
• 类幻灯片的 insertSheetsChart(sourceChart)