【问题标题】：How to get the selected chart in a Google spreadsheet with Apps Script如何使用 Apps 脚本在 Google 电子表格中获取所选图表
【发布时间】：2022-11-19 09:58:40
【问题描述】：

我正在尝试更改 Google 电子表格中图表的颜色。这适用于一张表中的所有图表。

function colorChart() {
  let $Sheet = SpreadsheetApp.getActiveSheet();
  let $Charts = $Sheet.getCharts();
  let $Colors = {
    'One': '#6E6E6E',
    'Two': '#FFED00',
    'Three': '#238C96',
  };

  for (let $i in $Charts) {
    let $Chart = $Charts[$i].modify()
      .setOption('series.0.color', $Farben['One'])
      .setOption('series.1.color', $Farben['Two'])
      .setOption('series.2.color', $Farben['Three'])
      .build();
    $Sheet.updateChart($Chart);
  }
}

在文档中，我只能找到 getCharts()，它返回活动工作表中所有图表的数组。

是否可以只获取选定的图表？

不幸的是，这里没有回答这个问题：How to get the chart info from selected chart in active spreadsheet? (google apps script)

使用帖子中提到的 $Sheet.getCharts()[0] 无效，因为只返回了工作表的第一张图表。

【问题讨论】：

看来是不可能的。您想改为检查可能的解决方法吗？
当然。你有什么建议？

标签： google-apps-script google-sheets

【解决方案1】：

建议/解决方法

这里的挑战是 Apps 脚本中的 SpreadsheetApp 类似乎没有专门的方法来选择 chart 或工作表上的任何可移动/可调整大小的元素，但仅限于选定的单元格/行。

作为解决方法，也许您可以尝试使用自定义的实现HTML页面将为您提供从工作表查看当前创建的图表的选项（通过自定义菜单&自定义侧边栏)从那里，您将可以选择从中选择一个图表HTML界面并应用更改。

演示

样本：编辑饼图

HTML 页面上的示例下拉菜单（由于屏幕截图下拉的限制）

示例应用程序脚本文件和 HTML 文件：

笔记：社区成员不为你编码但您可以使用这些示例代码（来源于网上搜索到的几个示例代码）下面作为起点让你开始。

Code.gs

/**Creates a custom menu to load an edit chart sidebar.*/
function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
    .createMenu('Edit Chart')
    .addItem('Start', 'showSidebar')
    .addToUi();
}

/**Shows the custom html sidebar.*/
function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('Page')
    .setTitle('Edit Charts');
  SpreadsheetApp.getUi()
    .showSidebar(html);
}

/**Function to return the current charts on a sheet.*/
function getCurrentChartsOnSheet() {
  var charts = buildMenu();
  return charts;
}

/**Function to get the current charts on a sheet.*/
function buildMenu() {
  var getChartsMenu = [];
  let $Sheet = SpreadsheetApp.getActiveSheet();
  let $Charts = $Sheet.getCharts();

  for (let $i in $Charts) {
    getChartsMenu.push([$i + ' - ' + $Charts[$i].modify().getChartType().toString()])
  }

  return getChartsMenu; //Structure of the array will be: [chart index #] - [Chart type]
}

/**Function to edit the selected chart.*/
function editSelectedChart(selection) {
  let $Sheet = SpreadsheetApp.getActiveSheet();
  let $Charts = $Sheet.getCharts();
  let $Colors = {
    'One': '#6E6E6E',
    'Two': '#FFED00',
    'Three': '#238C96',
  };

  let $Chart = $Charts[selection.match(/d+/g)].modify()
    .setOption('series.0.color', $Colors['One'])
    .setOption('series.1.color', $Colors['Two'])
    .setOption('series.2.color', $Colors['Three'])
    .build();
  $Sheet.updateChart($Chart);
}

Page.html

<!DOCTYPE html>
<html>
<title>Edit Charts</title>

<head>
  <style>
    .space {
      width: 4px;
      height: auto;
      display: inline-block;
    }
  </style>
  <script>
    google.script.run.withSuccessHandler(onSuccess).getCurrentChartsOnSheet();

    function onSuccess(data) {
      var select = document.getElementById("selectChart");
      var options = data;
      for(var i = 0; i < options.length; i++) {
          var opt = options[i];
          var el = document.createElement("option");
          el.textContent = opt;
          el.value = opt;
          select.appendChild(el);
      }
    }

    function passSelectedChart(){
      var e = document.getElementById("selectChart");
      google.script.run.editSelectedChart(e.value); //<-- PASS the selected drop-down data to GOOGLE SCRIPT function named editSelectedChart()
    }
          
  </script>
</head>

<body>

  <h3>Choose a chart to edit:</h3>
  <select id="selectChart">
    <option>No Selection</option>
  </select>

  <div>
    <p><input type="button" value="Apply" onclick="passSelectedChart()"></p>
  </div>

  <div>
    <p><input type="button" value="Close" onclick="google.script.host.close()"></p>
  </div>

</body>

</html>

参考

【讨论】：

@Alex 希望这对您有所帮助。