Использование API визуализации Google на сайтах Google

Я новичок в JS и GAS и пока неплохо справляюсь. Однако я заблудился, когда дело доходит до использования HTML с JS. Я хотел бы использовать функцию временной шкалы API визуализации Google и, используя данные с сайтов или листов, я хотел бы заполнить диаграмму.

API визуализации Google >> ЗДЕСЬ ‹<

Сервис диаграмм Google с использованием DoGet >> ЗДЕСЬ ‹<

Вторая ссылка показывает реализацию, кажется, что я не могу встроить эти созданные диаграммы на свой сайт?

Как мне объединить службу HTML с JS для отображения временной шкалы на сайте Google?


google-apps-script google-visualization google-sites
person JForgie    schedule 21.12.2014    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Пользовательский интерфейс устарел

Служба пользовательского интерфейса устарела всего несколько дней назад, 11 декабря 2014 г.

Документация Google - служба пользовательского интерфейса

Вот пошаговое объяснение того, что вам нужно сделать:

Создайте скрипт приложений, прикрепленный к вашему сайту

  • На своем сайте Google - нажмите кнопку со значком шестеренки.
  • Выберите УПРАВЛЕНИЕ САЙТОМ
  • Щелкните пункт СЦЕНАРИЙ ПРИЛОЖЕНИЙ.
  • Нажмите кнопку ДОБАВИТЬ НОВЫЙ СЦЕНАРИЙ.
  • Выберите СЦЕНАРИЙ КАК ВЕБ-ПРИЛОЖЕНИЕ

Замените код в функции doGet(), чтобы он выглядел так:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

Сохрани это. Дайте проекту имя.

Создайте файл index.html

  • Выберите ФАЙЛ, НОВЫЙ, HTML файл

Введите в HTML-файл следующее:

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["timeline"]});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
          [ 'Adams',      new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
          [ 'Jefferson',  new Date(1801, 2, 3),  new Date(1809, 2, 3) ]]);

        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <div id="timeline" style="width: 900px; height: 180px;"></div>
  </body>
</html>
  • Сохраните новый файл index.html

Опубликуйте свой скрипт приложений

  • Щелкните ПУБЛИКАЦИЯ.
  • Щелкните Развернуть как веб-приложение.
  • Сохраните новую версию, если версии нет
  • Нажмите ОБНОВИТЬ внизу

Добавьте гаджет скрипта приложений на свою страницу сайтов

  • Вернитесь на страницу своих сайтов.
  • Нажмите кнопку ИЗМЕНИТЬ страницу со значком карандаша
  • Щелкните меню ВСТАВИТЬ.
  • Выберите скрипт приложений
  • Выберите сценарий
  • Нажмите кнопку ВЫБРАТЬ

Сохраните все свои изменения.

У вас должно получиться примерно следующее:

Временная шкала на сайтах

Теперь, когда у вас есть код .gs и настроен HTML, вам нужно изменить JavaScript в теге SCRIPT файла HTML.

Вам нужно запустить google.script.run API, чтобы запустить другую функцию в .gs файле, которая будет выходить и получать ваши данные.

Документация Google - класс google.script.run (клиентский API) < / а>

Взгляните на эту документацию и узнайте, что она делает.

Новый код в файле index.html будет примерно таким:

<script>
  function onSuccess(importedData) {
    dataTable.addRows([importedData]);
    chart.draw(dataTable);
    alert('Your data has been loaded');
  }

  google.script.run.withSuccessHandler(onSuccess)
      .retrieveChartData();
</script>

Жестко закодированные данные будут заменены кодом. Это жестко закодированные данные, которые необходимо удалить и заменить на что-то другое:

    dataTable.addRows([
      [ 'Washington', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
      [ 'Adams',      new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
      [ 'Jefferson',  new Date(1801, 2, 3),  new Date(1809, 2, 3) ]]);

Вам нужно добавить еще одну функцию в ваш .gs файл сценария. Что-то вроде этого:

function retrieveChartData() {
  Logger.log('I was called!');
  //Get the data from your data source
  Code here
  var tableData = code here;
  //return the data
  return tableData;
}
person Alan Wells    schedule 21.12.2014
comment
Когда я беру свои данные для передачи на диаграмму, нужно ли мне создавать объект для всех данных? Вот как выглядит dataTable.addRows. Или я могу передать переменные из файла .gs в файл html? - person JForgie; 22.12.2014
comment
См. Функцию onSuccess. Функция onSuccess автоматически получает все, что возвращается из функции, вызываемой google.script.run. Данные, которые были жестко закодированы, не являются объектом, это двумерный массив. Вы можете передать объект из функции retrieveChartData(), но в функции onSuccess вам нужно будет переформатировать данные в двумерный массив. Если вы застряли на чем-то конкретном, просто опубликуйте другой вопрос с кодом и строкой, возвращающей неожиданный результат. Используйте Logger.log("Value is: " + variable); утверждения и ПРОСМОТРЕТЬ ЖУРНАЛ. - person Alan Wells; 23.12.2014