使用 Google Apps 脚本在 Google 表格中创建 EmbeddedChart 而不使用范围

Create EmbeddedChart in Google Sheets without using Range, with Google Apps Script

我正在尝试在 Google 表格中创建 EmbeddedChart，但未在我的电子表格中使用范围，而是使用我自己计算的值。搜索了几个小时后，我没有找到解决方案。 做这个的最好方式是什么 ？ （总而言之，我想像使用 ChartBuilder class 一样使用 EmbeddedChartBuilder class）

  • 您想使用图表服务创建一个可点击的图表并放入 Spreadsheet。
  • 您想使用 Google Apps 脚本实现此目的。

我能像上面那样理解。如果我的理解是正确的，那么这个答案呢？请将此视为几个可能的答案之一。

在这个回答中，我稍微修改了一下使用了的脚本。在这种情况下，在您的脚本中，检索列 "C2:C" 中的值，并使用值和值的重复数字创建图表。

模式 1：

在此模式中，为了创建可点击的图表，图表由 Google 可视化 API 创建并放入 Spreadsheet.[=24 上的对话框=]

用法：

为了运行脚本，请在复制粘贴以下脚本后，在脚本编辑器中运行openDialog()的功能。这样，Spreadsheet 将打开一个对话框并将图表放入对话框。

在此示例脚本中，值是从 Spreadsheet 中 const sheetName = "Sheet1" 的 sheet 的列 "C" 中检索的。所以请使用Spreadsheet的容器绑定脚本。请注意这一点。

示例脚本：Code.gs（Google Apps 脚本端）

const sheetName = "Sheet1";  // Please set the sheet name.

// Please run this function.
function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('index').setWidth(650).setHeight(550);
  SpreadsheetApp.getUi().showModalDialog(html, "sample");
}

function getValuesFromSpreadsheet() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);
  return sheet.getRange(`C2:C${sheet.getLastRow()}`).getValues()
    .reduce((o, [e]) => {
      o[e] = e in o ? o[e] + 1 : 1
      return o;
    }, {});
}

示例脚本：index.html（HTML&Javascript 边）

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<script>
  google.charts.load('current', {'packages':['corechart', 'bar']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    google.script.run.withSuccessHandler(artists => {
      var dataArtists = new google.visualization.DataTable();
      dataArtists.addColumn('string', 'Artists');
      dataArtists.addColumn('number', 'Count');
      for(var key in artists) {
        dataArtists.addRow([key, artists[key]]);
      }
      const options = {
        title: 'Number of Tracks per Artist',
        vAxis: {title: "Artists"},
        hAxis: {title: "Number of  Tracks"},
        width: 600,
        height: 500
      };
      barsVisualization = new google.visualization.BarChart(document.getElementById('chart_div'));
      barsVisualization.draw(dataArtists, options);
    }).getValuesFromSpreadsheet();
  }
</script>

模式二：

在此模式中，使用修改后的脚本创建的图表作为图像放入 Spreadsheet。在这种情况下，图表由 运行 宁用 Charts Service 创建的 myFunction 的函数放置。在这种情况下，数据是从活动 sheet 中检索的。请注意这一点。

示例脚本：

function myFunction() {
  var app = SpreadsheetApp;
  var ss = app.getActiveSpreadsheet();
  var sheet = ss.getActiveSheet();
  var artistsArray;
  var dataArtists;
  dataArtists = Charts.newDataTable().addColumn(Charts.ColumnType.STRING, 'Artists').addColumn(Charts.ColumnType.NUMBER, 'Count');
  var artists = sheet.getRange(`C2:C${sheet.getLastRow()}`).getValues()
    .reduce((o, [e]) => {
      o[e] = e in o ? o[e] + 1 : 1
      return o;
    }, {});
  for(var key in artists) {
    dataArtists.addRow([key, artists[key]]);
  }
  dataArtists.build();
  var artistsChart = Charts.newBarChart()
  .setDataTable(dataArtists)
  .setTitle('Number of Tracks per Artist')
  .setXAxisTitle('Number of  Tracks')
  .setYAxisTitle('Artists')
  .setDimensions(600, 500)
  .build();
  sheet.insertImage(artistsChart.getBlob(), 1, 1);
}

注：

  • 在这种情况下，请在脚本编辑器中启用 V8。

参考文献：