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

Question

我正在寻找一种将 Charts.Chart 嵌入到 Google Sheet 的方法（但不仅如此，我还希望能够将其插入其他支持，例如作为用户窗体，Google 文档等）

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

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

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

所以，基本上我想避免类似的东西，因为它会创建对 Sheet 的依赖。

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

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

Exception: The parameters (Charts.Chart) don't match the method signature for SpreadsheetApp.Sheet.insertChart.

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

感谢您的任何见解！

Answer 1

EmbeddedChart 不是 Class 图表的一部分

根据 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