文章/答案/技术大牛

发布

社区首页 >问答首页 >在谷歌卡中插入谷歌图表

问在谷歌卡中插入谷歌图表
EN

Stack Overflow用户

提问于 2020-11-05 08:30:30

回答 1查看 107关注 0票数 1

我正在开发一个使用CardService的google插件。有没有办法在google Card2中插入google Charts1？我找不到这方面的任何文件。

同时也想出一种方法来隐藏图表图像和插入，这是可能的吗？

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

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

google-apps-script

add-on

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-11-05 10:34:33

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

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

工作流将取决于图表是否将由加载项构建.

如果图表是由外接程序生成的，则只需检索基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();
}

如果图表不是由外接程序构建的，我建议将图像存储在Drive中，使其公开访问并检索其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添加到清单中(参见设置显式作用域)。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64693644

复制

相似问题

问在谷歌卡中插入谷歌图表
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在谷歌卡中插入谷歌图表EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在谷歌卡中插入谷歌图表
EN