使用 Google Apps 腳本在不使用范圍的情況下在 Google 表格中創建 EmbeddedChart

Question

我正在嘗試在 Google Sheets 中創建一個 EmbeddedChart，而不在我的電子表格中使用 Range，而是使用我自己計算的值。 搜索了幾個小時后，我沒有找到解決方案。 做這個的最好方式是什么 ？ （總而言之，我想像 ChartBuilder 類一樣使用 EmbeddedChartBuilder 類）

Answer 1

• 您想使用圖表服務創建一個可點擊的圖表並將其放入電子表格。
• 您想使用 Google Apps 腳本來實現這一點。

我可以像上面那樣理解。 如果我的理解是正確的，這個答案怎么樣？ 請將此視為幾種可能的答案之一。

在這個答案中，我通過稍微修改使用了您上一個問題的腳本。 在這種情況下，在您的腳本中，將檢索“C2:C”列中的值，並使用這些值和重復的值創建圖表。

模式一：

在此模式中，為了創建可點擊的圖表，圖表由 Google Visualization API 創建並放入電子表格上的對話框中。

用法：

為了運行腳本，請在復制並粘貼以下腳本后，在腳本編輯器中運行openDialog()函數。 這樣，一個對話框被打開到電子表格，圖表被放置到對話框中。

在此示例腳本中，值是從電子表格中const sheetName = "Sheet1"表的“C”列中檢索的。 所以請使用電子表格的容器綁定腳本。 請注意這一點。

示例腳本： 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>

模式2：

在此模式中，使用修改后的腳本腳本創建的圖表將作為圖像放入電子表格。 在這種情況下，通過運行使用Charts Service創建的myFunction函數來放置圖表。 在這種情況下，數據是從活動工作表中檢索的。 請注意這一點。

示例腳本：

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。

參考：

• 使用谷歌圖表
• Google 可視化 API 參考
• 條形圖
• 圖表服務