Таблицы Google

На этой странице описывается, как использовать Google Charts с таблицами Google.

Введение

Google Charts и Google Spreadsheets тесно интегрированы. Вы можете поместить диаграмму Google в электронную таблицу Google, а диаграммы Google могут извлекать данные из электронных таблиц Google. В этой документации показано, как сделать и то, и другое.

Какой бы метод вы ни выбрали, ваша диаграмма будет меняться всякий раз, когда изменяется базовая электронная таблица.

Встраивание диаграммы в электронную таблицу

Включить диаграмму в электронную таблицу очень просто. На панели инструментов электронных таблиц выберите «Вставить», а затем «Диаграмма», и вы сможете выбрать тип диаграммы и выбрать различные параметры:

Создание диаграммы из отдельной электронной таблицы

Обычно люди создают диаграммы Google, заполняя таблицу данных и рисуя диаграмму, используя эти данные. Если вместо этого вы хотите получить данные из электронной таблицы Google, вы запросите электронную таблицу, чтобы получить данные для диаграммы:

function drawChart() {
  var query = new google.visualization.Query(URL);
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  var data = response.getDataTable();
  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
  chart.draw(data, null);
}

Это работает, потому что электронные таблицы Google поддерживают язык запросов Google Charts для сортировки и фильтрации данных; любая система, поддерживающая язык запросов, может использоваться в качестве источника данных.

Обратите внимание, что диаграммы не могут использовать привилегии человека, просматривающего их, без явного разрешения. Электронная таблица должна быть либо видна всем, либо страница должна явно получить учетные данные конечного пользователя, как описано в разделе « Авторизация » на этой странице.

Чтобы использовать электронную таблицу Google в качестве источника данных, вам понадобится ее URL:

  1. Откройте существующую электронную таблицу. Эта электронная таблица должна иметь формат, ожидаемый вашей визуализацией, и для нее должны быть правильно установлены права просмотра. (Права просмотра «Общедоступный в Интернете» или «Все, у кого есть ссылка» будут самыми простыми, и инструкции в этом разделе предполагают, что электронная таблица была настроена таким образом. Вы можете ограничить, оставив электронную таблицу «Частной» и предоставив доступ к отдельным учетным записям Google, но вам нужно будет следовать приведенным ниже инструкциям по авторизации ).
  2. Скопируйте URL из вашего браузера. Дополнительные сведения о выборе определенных диапазонов см. в разделе Диапазоны источников запросов .
  3. Укажите URL для google.visualization.Query() . Запрос поддерживает следующие необязательные параметры:
    • headers= N : указывает, сколько строк являются строками заголовков, где N — целое число, равное нулю или больше. Они будут исключены из данных и назначены в качестве меток столбцов в таблице данных. Если вы не укажете этот параметр, электронная таблица будет угадывать, сколько строк являются строками заголовков. Обратите внимание: если все ваши столбцы представляют собой строковые данные, в электронной таблице могут возникнуть трудности с определением строк заголовков без этого параметра.
    • gid= N : указывает, на какой лист в многостраничном документе следует ссылаться, если вы не ссылаетесь на первый лист. N — идентификационный номер листа. Вы можете узнать идентификационный номер, перейдя к опубликованной версии этого листа и найдя параметр gid= N в URL-адресе. Вы также можете использовать параметр sheet вместо этого параметра. Подсказка: таблицы Google могут изменить порядок параметра gid в URL-адресе при просмотре в браузере; при копировании из браузера убедитесь, что все параметры указаны до знака # в URL-адресе. Пример: gid=1545912003 .
    • sheet= sheet_name : указывает, на какой лист в многостраничном документе вы ссылаетесь, если вы не ссылаетесь на первый лист. имя_листа — это отображаемое имя листа. Пример: sheet=Sheet5 .

Вот полный пример:

Ниже приведены два способа рисования этой диаграммы: один с использованием параметра gid , а другой с использованием параметра sheet . Ввод любого URL-адреса в браузере приведет к тому же результату/данным для диаграммы.

GID
    function drawGID() {
      var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');

      var query = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?gid=0&headers=1&tq=' + queryString);
      query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var data = response.getDataTable();
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, { height: 400 });
    }
Лист
    function drawSheetName() {
      var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');

      var query = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString);
      query.send(handleSampleDataQueryResponse);
    }

    function handleSampleDataQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var data = response.getDataTable();
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, { height: 400 });
    }

Диапазоны источников запросов

URL-адрес источника запроса указывает, какую часть электронной таблицы использовать в запросе: конкретную ячейку, диапазон ячеек, строки или столбцы или всю электронную таблицу. Укажите диапазон, используя синтаксис "range=< range_expr >", например:

https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?range=A1:C4
   

Вот несколько примеров, демонстрирующих синтаксис:

  • A1:B10 — диапазон от ячейки A1 до B10.
  • 5:7 - Ряды 5-7
  • D:F — столбцы DF
  • A:A70 — первые 70 ячеек в столбце A
  • A70:A - Столбец A от строки 70 до конца
  • B5:5 - B5 до конца 5-го ряда
  • D3:D - D3 до конца столбца D
  • C:C10 - С начала столбца C до C10

Авторизация

Google Таблицам требуются учетные данные конечного пользователя для доступа к частным электронным таблицам через Google Visualization API ("запросы /tq").

Примечание. Электронные таблицы, к которым открыт доступ «все, у кого есть ссылка, могут просматривать», не требуют учетных данных. Изменить настройки общего доступа к электронной таблице намного проще, чем реализовать авторизацию.

В случаях, когда совместное использование ссылок не является приемлемым решением, разработчикам потребуется изменить свой код, чтобы передать учетные данные OAuth 2.0, авторизованные для области API Google Sheets (https://www.googleapis.com/auth/spreadsheets).

Дополнительные сведения об OAuth 2.0 см. в разделе Использование OAuth 2.0 для доступа к API Google.

Пример: использование OAuth для доступа к /gviz/tq

Предварительное условие: получите идентификатор клиента из консоли разработчика Google.

Более подробные инструкции по интеграции с Google Identity Platform можно найти в разделах Вход в Google и Создание проекта Google API Console и идентификатора клиента .

Чтобы получить токены OAuth для конечного пользователя, вы должны сначала зарегистрировать свой проект в консоли разработчика Google и получить идентификатор клиента.

  1. В консоли разработчика создайте новый идентификатор клиента OAuth .
  2. Выберите Веб-приложение в качестве типа приложения.
  3. Выберите любое имя; это только для вашей информации.
  4. Добавьте имя своего домена (и любых тестовых доменов) как Авторизованные источники JavaScript .
  5. Оставьте URI авторизованного перенаправления пустым.

После нажатия кнопки «Создать» скопируйте идентификатор клиента для дальнейшего использования. Секрет клиента для этого упражнения не требуется.

Обновите свой сайт, чтобы получить учетные данные OAuth.

Google предоставляет библиотеку gapi.auth , которая значительно упрощает процесс получения учетных данных OAuth. В приведенном ниже примере кода эта библиотека используется для получения учетных данных (при необходимости запрашивается авторизация) и передачи полученных учетных данных в конечную точку /gviz/tq.

demo.html
<html>
<body>
  <button id="authorize-button" style="visibility: hidden">Authorize</button>
  <script src="./demo.js" type="text/javascript"></script>
  <script src="https://apis.google.com/js/auth.js?onload=init"></script>
</body>
</html>
demo.js
// NOTE: You must replace the client id on the following line.
var clientId = '549821307845-9ef2xotqflhcqbv10.apps.googleusercontent.com';
var scopes = 'https://www.googleapis.com/auth/spreadsheets';

function init() {
  gapi.auth.authorize(
      {client_id: clientId, scope: scopes, immediate: true},
      handleAuthResult);
}

function handleAuthResult(authResult) {
  var authorizeButton = document.getElementById('authorize-button');
  if (authResult && !authResult.error) {
    authorizeButton.style.visibility = 'hidden';
    makeApiCall();
  } else {
    authorizeButton.style.visibility = '';
    authorizeButton.onclick = handleAuthClick;
  }
}

function handleAuthClick(event) {
  gapi.auth.authorize(
      {client_id: clientId, scope: scopes, immediate: false},
      handleAuthResult);
  return false;
}

function makeApiCall() {
  // Note: The below spreadsheet is "Public on the web" and will work
  // with or without an OAuth token.  For a better test, replace this
  // URL with a private spreadsheet.
  var tqUrl = 'https://docs.google.com/spreadsheets' +
      '/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq' +
      '?tqx=responseHandler:handleTqResponse' +
      '&access_token=' + encodeURIComponent(gapi.auth.getToken().access_token);

  document.write('<script src="' + tqUrl +'" type="text/javascript"></script>');
}

function handleTqResponse(resp) {
  document.write(JSON.stringify(resp));
}

После успешной gapi.auth.getToken() вернет все детали учетных данных, включая access_token , который можно добавить к запросам /gviz/tq.

Для получения дополнительной информации об использовании библиотеки gapi для аутентификации см.:

Использование области действия drive.file

В предыдущем примере используется область API Google Таблиц, которая предоставляет доступ для чтения и записи ко всему содержимому электронной таблицы пользователя. В зависимости от приложения это может быть более допустимым, чем необходимо. Для доступа только для чтения используйте область электронных таблиц.readonly, которая предоставляет доступ только для чтения к листам пользователя и их свойствам.

Область действия drive.file (https://www.googleapis.com/auth/drive.file) предоставляет доступ только к тем файлам, которые пользователь явно открывает с помощью средства выбора файлов Google Диска, запущенного через Picker API .

Использование средства выбора изменяет поток вашего приложения. Вместо того, чтобы вставлять URL-адрес или иметь жестко закодированную электронную таблицу, как в приведенном выше примере, пользователь должен использовать диалоговое окно выбора, чтобы выбрать, к какой электронной таблице он хотел бы получить доступ к вашей странице. Следуйте примеру Picker "Hello World" , используя google.picker.ViewId.SPREADSHEETS вместо google.picker.ViewId.PHOTOS .