Google Charts - проблема с таблицей данных с запросом API и jQuery - PullRequest
Новая
       2

Google Charts - проблема с таблицей данных с запросом API и jQuery

4 голосов
/ 13 февраля 2020

Я сильно борюсь с тем, что должно быть простым AJAX вызовом API, который возвращает данные в формате DataTable ( Справочник по API визуализации Google ) для вставки в Google Chart. Данные успешно получены с помощью вызова AJAX, и я могу предупредить ответ в браузере без проблем. Тем не менее, когда я передаю ту же самую точную переменную chartData - я сталкиваюсь с ошибкой в ​​консоли:

Uncaught (в обещании) SyntaxError: Неожиданный токен c в JSON в позиции 1 в JSON .parse ()

Я разместил код, который использую ниже; любая помощь будет принята с благодарностью.

FRONT END [charts-testing.php] 

<html>
    <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <script type="text/javascript">
            google.charts.load('current', {'packages':['corechart']});
            google.charts.setOnLoadCallback(drawChart);
            function drawChart() {
                var chartData = $.ajax({
                    url: "includes/processing/process_chart_data.php",
                    async: false, 
                }).responseText;

                alert(chartData);
                var data = new google.visualization.DataTable(chartData);
                var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                chart.draw(data, {width: 400, height: 240});
        }
        </script>
    </head>
    <body>
        <div id="chart_div"></div>
    </body>
</html>

BACK END [process-chart-data.php] 

<?php
include_once '../classes/clsAPI.php';
$objAPI = new clsAPI();

$api = [redacted]
$chartData = $objAPI->getDataTable($api);

header('Content-Type: text/plain');
echo $chartData;
?>

ОТВЕТ НА ДАННЫЕ ПРОЦЕССА-ДИАГРАММЫ. php

{cols:[{id:'AgeRange',label:'Age Range',type:'string'},{id:'MemberCount',label:'Member Count',type:'number'}],rows:[{c:[{v:'18-34'},{v:200}]},{c:[{v:'35-44'},{v:200}]},{c:[{v:'45-54'},{v:400}]},{c:[{v:'55-64'},{v:500}]},{c:[{v:'65-74'},{v:600}]}]}

ЗАПРОСЫ ЗАГОЛОВОК 

GET /includes/processing/process_chart_data.php HTTP/1.1
Host: local.site.com
Connection: keep-alive
Accept: */*
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.87 Safari/537.36
Referer: http://local.site.com/charts-testing.php
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,fr;q=0.8

Заголовки откликов 

HTTP/1.1 200 OK
Date: Thu, 13 Feb 2020 07:08:12 GMT
Server: Apache/2.2.34 (Unix) mod_wsgi/3.5 Python/2.7.13 PHP/7.2.10 mod_ssl/2.2.34 OpenSSL/1.0.2o DAV/2 mod_fastcgi/mod_fastcgi-SNAP-0910052141 mod_perl/2.0.9 Perl/v5.24.0
X-Powered-By: PHP/7.2.10
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate
Pragma: no-cache
Content-Length: 247
Keep-Alive: timeout=5, max=99
Connection: Keep-Alive
Content-Type: text/plain;charset=UTF-8

Следует также отметить, что при замене chartData точным ответом от API (без форматирования) он отображает диаграмму без ошибок.

РЕДАКТИРОВАТЬ

Чтобы проиллюстрировать ответ на вызов API, работающий при ручном вводе в вызов Visualization, см. Ниже. Это успешно отображает график и совпадает со значением var chartData: 

<html>
    <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <script type="text/javascript">
            google.charts.load('current', {'packages':['corechart']});
            google.charts.setOnLoadCallback(drawChart);

            function drawChart() {
                var chartData = $.ajax({
                    url: "includes/processing/process_chart_data.php",
                    async: false, 
                }).responseText;

                alert(chartData);
                var data = new google.visualization.DataTable({cols:[{id:"AgeRange",label:"Age Range",type:"string"},{id:"MemberCount",label:"Member Count",type:"number"}],rows:[{c:[{v:"18-34"},{v:200}]},{c:[{v:"35-44"},{v:200}]},{c:[{v:"45-54"},{v:400}]},{c:[{v:"55-64"},{v:500}]},{c:[{v:"65-74"},{v:600}]}]});
                var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                chart.draw(data, {width: 400, height: 240});
        }
        </script>
    </head>
    <body>
        <div id="chart_div"></div>
    </body>
</html>

1 Ответ

1 голос
/ 13 февраля 2020

Похоже, что Google Visualization API выполняет json .parse для вашего ответа с сервера, поэтому

$objAPI->getDataTable должен вывести ваш JSON объект, подобный этому

вместо использования «cols» для строк и имен элементов объекта используйте «cols» 

  cols: [{id: 'A', label: 'NEW A', type: 'string'}]

используйте это 

"cols": [{"id":"A", "label": "NEW A", "type": "string"}]

также, почему при использовании asyn c: false

посмотрите на это
, вы должны использовать asyn c, а затем вызвать on-success success:function(data){/*call chart foramtting*/}

asyn c (по умолчанию: true) Тип: Boolean По умолчанию все запросы отправляются асинхронно (т.е. по умолчанию установлено значение true). Если вам нужны синхронные запросы, установите для этого параметра значение false. Междоменные запросы и dataType: запросы «jsonp» не поддерживают синхронную работу. Обратите внимание, что синхронные запросы могут временно блокировать браузер, отключая любые действия, когда запрос активен. Начиная с jQuery 1.8 использование asyn c: false с jqXHR ($ .Deferred) устарело; Вы должны использовать опции обратного вызова success / error / complete вместо соответствующих методов объекта jqXHR, таких как jqXHR.done ().

или 

$.get('includes/processing/process_chart_data.php', function (chartData) {
var data = new google.visualization.DataTable(chartData);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240});});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...