在谷歌卡内插入谷歌图表答案

【问题标题】：Inserting google Chart inside google Card在谷歌卡内插入谷歌图表
【发布时间】：2020-11-05 18:34:33
【问题描述】：

我正在使用 CardService 开发一个谷歌插件。有没有办法在 google Card[2] 中插入 google Charts[1]？我找不到任何相关文档。

也在想办法将图表转换为图像和插入，这可能吗？

[1] - https://developers.google.com/apps-script/reference/charts

[2] - https://developers.google.com/apps-script/reference/card-service

【问题讨论】：

嗯，好问题，我之前研究过 - 没有办法直接这样做，但是插入图像作为带有数据 URL (data:image/png;base64) 的 Image 小部件可能是可行的方法.唯一的缺点是我们无法控制图像大小，因此您应该相应地制作图表
另外，如果您想添加表格图表，请注意getAs() 方法。我有一段时间没有使用图表，并决定在 TableChart 上进行测试，这显然有一个错误（仍未修复）导致服务器错误：stackoverflow.com/questions/57385584/…

标签： google-apps-script add-on

【解决方案1】：

您必须将图表转换为图像，然后将该图像添加到您的卡片中。

setImageUrl(url) 接受可公开访问的 URL 和 base64 编码的图像字符串。

工作流程取决于图表是否由插件构建。

如果图表是由插件构建的，您只需检索 base 64 字符串：

function getChartImageUrl() {
  var chart = Charts.
              // Building chart methods
              .build();
  var imageData = Utilities.base64Encode(chart.getAs('image/png').getBytes());
  var imageUrl = "data:image/png;base64," + encodeURI(imageData);  
  return imageUrl;
}

然后将其添加到您的卡片中：

function createChartCard() {
  var image = CardService.newImage().setAltText("An awesome chart").setImageUrl(getChartImageUrl());
  var section = CardService.newCardSection()
      .addWidget(image)
  var card = CardService.newCardBuilder()
      .addSection(section)
  return card.build();
}

如果图表不是由插件构建的，我建议将图像存储在云端硬盘中，使其可公开访问并检索其 ID：

function getChartImageId() {
  var chart = Charts.
              // Building chart methods
              .build();
  var imageBlob = chart.getAs('image/png');
  var file = DriveApp.createFile(imageBlob).setName("MY AWESOME CHART");
  file.setSharing(DriveApp.Access.ANYONE, DriveApp.Permission.VIEW);
  return file.getId();
}

然后，在插件中，通过 ID 检索文件并获取其 base64 编码字符串：

function createChartCard() {
  var imageId = "YOUR_IMAGE_ID"; // Returned by getChartImageId()
  var imageBytes = DriveApp.getFileById(imageID).getBlob().getBytes();
  var encodedImageURL = "data:image/jpeg;base64," + Utilities.base64Encode(imageBytes);
  var image = CardService.newImage().setAltText("An awesome chart").setImageUrl(encodedImageURL);
  var section = CardService.newCardSection()
      .addWidget(image)
  var card = CardService.newCardBuilder()
      .addSection(section)
  return card.build();
}

在第二种方法中，您必须将范围 https://www.googleapis.com/auth/drive.readonly 添加到清单中（请参阅 Setting explicit scopes）。

【讨论】：