Как получить выбранную диаграмму в электронной таблице Google с помощью Apps Script

Я пытаюсь изменить цвет диаграмм в электронной таблице 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(), который возвращает массив всех диаграмм на активном листе.

Можно ли получить только выбранный график?

К сожалению, здесь нет ответа на вопрос: Как получить информацию о графике из выбранного графика в активной таблице? (скрипт приложений Google)

Использование $Sheet.getCharts()[0], как упоминалось в посте, не работало, так как была возвращена только первая диаграмма листа.

Кажется, это невозможно. Хотите вместо этого проверить возможный обходной путь?

SputnikDrunk2 18.11.2022 05:35

Для уверенности. Что ты посоветуешь?

Alex 18.11.2022 08:36
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
2
82
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

ПРЕДЛОЖЕНИЕ/ВРЕМЕННОЕ РЕШЕНИЕ

Проблема здесь в том, что класс SpreadsheetApp в Apps Script, по-видимому, не имеет специального метода для выбора chart или любых подвижных/изменяемых по размеру элементов на листе, а только для выбранных ячеек/строк.

В качестве обходного пути, возможно, вы можете попробовать реализацию с использованием пользовательской HTML-страницы, которая даст вам возможность просматривать созданные в настоящее время диаграммы с листа (через пользовательское меню и пользовательскую боковую панель), и оттуда вы сможете иметь возможность выберите диаграмму из этого HTML-интерфейса и примените изменения.

Демо

  • Пример: редактирование круговой диаграммы

  • Образец раскрывающегося меню на HTML-странице (из-за ограничений раскрывающегося списка при снимке экрана)

Пример файла сценария приложения и файла HMTL:

ПРИМЕЧАНИЕ. Члены сообщества не пишут код за вас, но вы можете использовать приведенные ниже примеры кодов (полученные из нескольких примеров кодов, найденных в Интернете), чтобы начать работу.

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) {
    var currentChart = $Charts[$i].getOptions().get('title');
    getChartsMenu.push([$i + ' - ' + (currentChart.length < 1 ?
      $Charts[$i].modify().getChartType().toString() : currentChart)])
  }

  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 Надеюсь, это поможет вам.

SputnikDrunk2 19.11.2022 02:48

Спасибо @SputnikDrunk2, это работает.

Alex 21.11.2022 23:51

Интересно, почему вы используете функцию getCurrentChartsOnSheet() вместо прямого вызова buildMenu(). В чем преимущество этого способа?

Alex 21.11.2022 23:52

Не очень удобно использовать типы диаграмм в качестве описания. Вместо этого я бы предложил использовать $Charts[$i].getOptions().get('title'). Который работает, пока есть заголовок, и возвращает меня к первоначальному вопросу.

Alex 21.11.2022 23:54

@Alex извиняюсь за путаницу, я отделил getCurrentChartsOnSheet() от вызова buildMenu() только для удобочитаемости, когда тестировал его. Я знаю, что это избыточно, поэтому вместо этого вы могли бы вызвать buildMenu() в своем реальном коде. Что касается названий диаграмм, я понял вашу точку зрения с названиями вместо использования типов диаграмм, так как это имеет больше смысла. Я сделал небольшое изменение в строке для нажатия названий графиков. Будет использоваться название диаграммы (если доступно), в противном случае будет использоваться тип диаграммы.

SputnikDrunk2 22.11.2022 00:52

Другие вопросы по теме