Блог

Главная - Вопросы по программированию - ошибка запроса Google диаграмм из Google таблиц

ошибка запроса Google диаграмм из Google таблиц

#javascript

#javascript

Вопрос:

Я учусь использовать диаграммы Goolge. У меня нет проблем с использованием примеров для создания диаграмм с жестко закодированными данными. Тем не менее, я хотел бы прочитать данные из Google Таблиц с помощью запроса. Я потратил на это несколько дней и следовал всем примерам, которые смог найти. Суть в том, что я всегда получаю сообщение «Ошибка в запросе: время ожидания запроса истекло‘. Я даже получаю ошибку, когда пытаюсь воспроизвести пример Google developers. Должно быть что-то (возможно, настолько простое), чего мне не хватает. Я попытался сократить до максимально простого кода и таблицы здесь.

https://docs.google.com/spreadsheets/d/1i6HW7VGwqJVsA1FwzgQuzRTRqPfBw_KQW4DNiqPct4M

Я также могу сгенерировать json-файл с более длинным URL-адресом https://docs.google.com/spreadsheets/d/1i6HW7VGwqJVsA1FwzgQuzRTRqPfBw_KQW4DNiqPct4M/gviz/tq?gid=209730183amp;headers=1amp;tq=

Но я получаю пустое окно браузера с ошибкой в запросе с html-файлом ниже.

Очень благодарен за любую помощь.

 <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var opts = {sendMethod: 'auto'};

        var queryString = encodeURIComponent('SELECT A, B');

    
        var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1i6HW7VGwqJVsA1FwzgQuzRTRqPfBw_KQW4DNiqPct4M/gviz/tq?gid=209730183amp;headers=1amp;tq='   queryString, opts);
      query.send(handleSampleDataQueryResponse);
    }

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

      var data = response.getDataTable();


        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
      chart.draw(data, { height: 400 });
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>

Ответ №1:

Джанин, в твоем коде нет ничего плохого. Диаграмма отображается правильно — http://brisray.com/test/janine.htm

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

Комментарии:

1. Большое спасибо за ответ! Это интересная информация. Что я в конечном итоге узнал из другого комментария, на который я наткнулся (я думаю, на форуме Google Chart), так это то, что в текущей версии Google charts появились некоторые новые проблемы с безопасностью. Как и было рекомендовано, я использовал более старую версию с вызовом: google.charts.load(’47’, {‘packages’:[‘corechart’]});

2. Вместо значения по умолчанию current (которое является версией 49). Это сработало немедленно! Еще раз спасибо.

3. Кроме того, я должен был сказать, что да, я пытался запустить локально.

4. Я пытался запустить импорт моей собственной электронной таблицы Google локально, и это не удалось. Когда я загрузил его на веб-сайт, он работал правильно. Что особенно затрудняло диагностику, так это то, что примеры из документации Google charts выполнялись локально.

Метки: