google не определен в скрипте google - ошибка

Я получаю сообщение об ошибке «google не определено» из моего скрипта google, который создает таблицу с использованием google.visualization.

Как добавить ссылку на скрипт Google, и если я получу его для запуска в скриптах, мне также придется добавить его на свой сайт Google? Я положу свой сценарий ниже.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

  function doGet() {

    drawTable()

  }
function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time');
  data.addRows(1);
  data.setCell(0, 0, 'John');
  data.setCell(0, 1, 10000, '$10,000');
  data.setCell(0, 2, true);

  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(data, {showRowNumber: true});

  google.visualization.events.addListener(table, 'select', function() {
    var row = table.getSelection()[0].row;
    alert('You selected ' + data.getValue(row, 0));
  });
}

person Luk6e    schedule 04.04.2015    source источник


Ответы (2)


Сценарий приложений использует JavaScript в качестве серверного кода. Первоначально JavaScript был разработан как язык для работы в браузере (на компьютере пользователя). JavaScript в файле HTML не будет запускать JavaScript на серверах Google.

В редакторе скриптов вы можете создавать два типа файлов:

  • Скрипт
  • HTML

doGet() можно использовать только в файле сценария .gs. Вы не можете использовать его в HTML JavaScript.

В вашем файле Code.gs должен быть код, который выглядит примерно так:

Код.gs

function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.NATIVE);
};

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
};

Тогда вам нужен файл HTML.

index.html

<div id="EntireSite">

  <div>
      body
    <?!= include('Chart'); ?>
    <br><br><br><br><br><br><br><br><br><br><br>
  </div>

  <div>
    My Footer
  </div>

  <div style="background: brown">
    <br>
    <br>
    <br>
    <br>
  </div>

</div>

В этом примере вам нужен второй файл HTML для диаграммы:

Диаграмма.html

<script type="text/javascript">
    google.load("visualization", '1', {packages:['corechart']});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['Element', 'Density', { role: 'style' }],
        ['Copper', 8.94, '#b87333', ],
        ['Silver', 10.49, 'silver'],
        ['Gold', 19.30, 'gold'],
        ['Platinum', 21.45, 'color: #e5e4e2' ]
      ]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        bar: {groupWidth: '95%'},
        legend: 'none',
      };

      var chart_div = document.getElementById('chart_div');
      var chart = new google.visualization.ColumnChart(chart_div);

      chart.draw(data, options);
  }
</script>

<div id='chart_div'></div>
person Alan Wells    schedule 04.04.2015
comment
Этот ответ объясняет ошибки пользователя лучше, чем другой. - person Zig Mandel; 04.04.2015
comment
@Sandy Good - Еще раз спасибо, Сэнди, это идеально. Часть, которую мне не хватало, заключается в том, что в самом проекте сценария Google вы можете иметь файлы html. Я надеюсь, что мне не нужно больше публиковать, так как когда я начну, у меня будет много документации. - person Luk6e; 04.04.2015

Во-первых, кажется, что вам не хватает тегов <script> вокруг функций JavaScript, которые следуют за ссылкой на google.com/jsapi.

Также вам нужно вызвать следующую функцию для загрузки соответствующего «пакета».

google.load('visualization', '1.0', {'packages':['table']});

И эту функцию для вызова drawTable()

google.setOnLoadCallback(drawTable);

Если предположить, что вы встраиваете скрипт в HTML-страницу, полная страница будет выглядеть примерно так:

<html>
<head>        
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">                
        // Load the Visualization API and the table package.
        google.load('visualization', '1.0', {'packages':['table']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawTable);

        function drawTable() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Name');
          data.addColumn('number', 'Salary');
          data.addColumn('boolean', 'Full Time');
          data.addRows(1);
          data.setCell(0, 0, 'John');
          data.setCell(0, 1, 10000, '$10,000');
          data.setCell(0, 2, true);

          var table = new google.visualization.Table(document.getElementById('table_div'));
          table.draw(data, {showRowNumber: true});

          google.visualization.events.addListener(table, 'select', function() {
            var row = table.getSelection()[0].row;
            alert('You selected ' + data.getValue(row, 0));
          });
        }
    </script>
</head>

<body>        
        <div id="table_div"></div>           
</body>
</html>

Мой ответ основан на документации, найденной здесь: https://developers.google.com/chart/interactive/docs/gallery/table

person Ryan H.    schedule 04.04.2015
comment
Спасибо за ответ. Хотя ответ Сэнди сработал для меня, важно указать на загрузку пакета, который вы используете, как вы указали в своем примере. Спасибо за помощь - person Luk6e; 04.04.2015