时间戳

首页 > 解决方案 > 在 Google 表格中使用 Google Apps 脚本在不使用 Range 的情况下创建 EmbeddedChart

google-apps-script - 在 Google 表格中使用 Google Apps 脚本在不使用 Range 的情况下创建 EmbeddedChart

问题描述

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

标签： google-apps-scriptgoogle-sheetschartsgoogle-visualization

解决方案

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

我可以像上面那样理解。如果我的理解是正确的，这个答案怎么样？请认为这只是几个可能的答案之一。

在这个答案中，我通过稍微修改使用了您上一个问题的脚本。在这种情况下，在您的脚本中，检索“C2:C”列中的值，并使用这些值和值的重复数字创建图表。

模式一：

在此模式中，为了创建可点击的图表，图表由 Google Visualization API 创建并放入电子表格的对话框中。

用法：

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

在此示例脚本中，值是从电子表格中工作表的“C”列中检索的const sheetName = "Sheet1"。所以请使用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>

模式二：

在此模式中，使用修改后的脚本创建的图表作为图像放入电子表格中。在这种情况下，图表是通过运行使用Charts ServicemyFunction创建的功能来放置的。在这种情况下，将从活动工作表中检索数据。请注意这一点。

示例脚本：

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。

参考：

推荐阅读