在 google 卡片中插入 google 图表

Question

我正在使用 CardService 开发 google 插件。有什么方法可以在 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

Answer 1

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

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

工作流程将取决于图表是否由 add-on 构建。

如果图表是由 add-on 构建的，您只需检索 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();
}

如果图表不是由 add-on 构建的，我建议将图像存储在云端硬盘中，使其可公开访问并检索其 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();
}

然后，在 add-on 中，通过文件 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）。

在 google 卡片中插入 google 图表

Inserting google Chart inside google Card

add-on

google-apps-script