Question

尝试将图表保存到具有透明背景的云端硬盘时遇到麻烦。我可以<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <svg width="0" height="0"> <defs> <linearGradient id="Gradient01"> <stop offset="20%" stop-color="#39F" /> <stop offset="90%" stop-color="#F3F" /> </linearGradient> <linearGradient id="Gradient02"> <stop offset="00%" stop-color="#3F3" /> <stop offset="50%" stop-color="#39F" /> <stop offset="90%" stop-color="#F55" /> </linearGradient> </defs> </svg> <svg width="800px" height="300px" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="200" height="20" fill="url(#Gradient01)" /> <svg width="380px" height="330px" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="50" width="200" height="20" fill="url(#Gradient02)" /> </svg> </svg> </body> </html>，但是这并没有设置图表所在的“容器”的背景，因此图表仍然显示为白色背景。

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

谢谢尼克

.setOption('backgroundColor', 'transparent');

Answer 1

我相信你的目标如下。

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

修改点：

最近，我报道了Creating PNG Image with Alpha Channel using Google Apps Script。看到你的问题，我觉得这个报告可能有用。这个报表的流程是针对你的情况，变成如下。
1. 检索图表并修改图表。
2. 更新图表。
3. 创建新的 Google 幻灯片作为临时文件。
4. 将幻灯片的背景颜色更改为透明。
5. 插入修改后的图表。图表的背景颜色是透明的。
6. 使用 Alpha 通道将幻灯片导出为 PNG。
7. 图表返回到原始图表。
8. 删除临时文件。
9. 将导出的 PNG 数据创建为文件。在这种情况下，当文件存在时，文件将被覆盖。如果找不到该文件，则会将该文件创建为新文件。
而且，当我看到您的脚本时，现有图表被修改为透明背景。因此，您从 var newChart =builderChart.build(); 检索 blob。在这种情况下，我发现修改后的图表仍然没有反映到newChart。因此，在此修改后的脚本中，图表由修改后的图表更新。并且，在检索到更新的图表后，图表将返回到原始图表。
而且，在这个修改后的脚本中，当 fileName 文件存在时，该文件会被新图表覆盖。如果未找到该文件，则使用新图表作为新文件创建该文件。

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

修改后的脚本：

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

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表格图表的透明背景作为PNG保存到云端硬盘中

1 个答案:

修改点：

修改后的脚本：

结果：

参考：