如何将 Charts.Chart 嵌入 Google 表格（脚本应用程序）

Question

我正在寻找一种将Charts.Chart 嵌入 Google 表格的方法（但不仅如此，我还希望能够将其插入到其他支持中，例如用户表单、Google Doc 等）

function generateChart(data) {
  
  var chartBuilder = Charts.newBarChart();
    // Miscellaneous such as titles, dimensions and data
    // ..
    ;
  
  var chart = chartBuilder.build();
  
  return chart;
}

另外，我不想直接使用电子表格范围内的图表值（会有一些数据操作..），但如果来自data 哪里是数组结构，则使用。

data = {
  field1: [..],
  field2: ..
}

所以，基本上我想避免这样的事情，因为它会创建对工作表的依赖。

var sheet = SpreadsheetApp.getActiveSheet();
var chartBuilder = sheet.newChart()
  // ..
  ;

如果我写sheet.insertChart(generateChart(data))，我会收到以下错误。这是有道理的，因为我处理的不是同类型的Chart，但是有解决方法吗？

异常：参数 (Charts.Chart) 与 SpreadsheetApp.Sheet.insertChart 的方法签名不匹配。

我想知道是否不应该将其转换为 blob 以使其与 Google Sheet Chart 格式兼容，但我确信有更直接的方法可以实现它。

感谢您的任何见解！

Answer 1

EmbeddedChart 不是类图表的一部分

根据documentation for Charts 所说的creates a basic data table, populates an area chart with the data, and adds it into a web page as an image。您还可以获取图像 URL 和 Blob。

作为一种解决方法

通过使用表格

我会使用 insertImage 函数，利用 Charts 提供的 URL。

function myFunction() {
  var data = Charts.newDataTable()
    .addColumn(Charts.ColumnType.STRING, "Year")
    .addColumn(Charts.ColumnType.NUMBER, "Sales")
    .addColumn(Charts.ColumnType.NUMBER, "Expenses")
    .addRow(["2004", 1000, 400])
    .addRow(["2005", 1170, 460])
    .addRow(["2006", 660, 1120])
    .addRow(["2007", 1030, 540])
    .addRow(["2008", 800, 600])
    .addRow(["2009", 943, 678])
    .addRow(["2010", 1020, 550])
    .addRow(["2011", 910, 700])
    .addRow(["2012", 1230, 840])
    .build();

  var chart = Charts.newColumnChart()
    .setTitle('Sales & Expenses')
    .setXAxisTitle('Year')
    .setYAxisTitle('Amount (USD)')
    .setDimensions(600, 500)
    .setDataTable(data)
    .build();

  var htmlOutput = HtmlService.createHtmlOutput().setTitle('My Chart');
  var imageData = Utilities.base64Encode(chart.getAs('image/png').getBytes());
  var imageUrl = "data:image/png;base64," + encodeURI(imageData);

  // Insert the image in the A1
  SpreadsheetApp.getActiveSheet().insertImage(imageUrl, 1, 1);
}

通过使用文档

我会使用insertInlineImage

function myFunction() {
  var data = Charts.newDataTable()
    .addColumn(Charts.ColumnType.STRING, "Year")
    .addColumn(Charts.ColumnType.NUMBER, "Sales")
    .addColumn(Charts.ColumnType.NUMBER, "Expenses")
    .addRow(["2004", 1000, 400])
    .addRow(["2005", 1170, 460])
    .addRow(["2006", 660, 1120])
    .addRow(["2007", 1030, 540])
    .addRow(["2008", 800, 600])
    .addRow(["2009", 943, 678])
    .addRow(["2010", 1020, 550])
    .addRow(["2011", 910, 700])
    .addRow(["2012", 1230, 840])
    .build();

  var chart = Charts.newColumnChart()
    .setTitle('Sales & Expenses')
    .setXAxisTitle('Year')
    .setYAxisTitle('Amount (USD)')
    .setDimensions(600, 500)
    .setDataTable(data)
    .build();

  var image = chart.getAs('image/png')
  
  // Insert an image chart
  var doc = DocumentApp.getActiveDocument();

  var cursor = doc.getCursor();
  if (cursor) {
    cursor.insertInlineImage(image);
  } else {
    doc.getBody().insertImage(0, image);
  }
}

参考

Google Apps Script > Charts