时间戳

首页 > 解决方案 > Google Charts - API 请求和 jQuery 的 DataTable 问题

javascript - Google Charts - API 请求和 jQuery 的 DataTable 问题

问题描述

我正在努力解决应该是对 API 的简单 AJAX 调用，该 API 呈现回 DataTable 格式化数据（Google Visualization API Reference）以插入 Google Chart。通过 AJAX 调用成功接收数据，我可以毫无问题地提醒浏览器响应。但是，当我传入相同的确切变量时chartData- 我在控制台中遇到错误：

Uncaught (in promise) SyntaxError: Unexpected token c in JSON at position 1 at JSON.parse ()

我把我正在使用的代码放在下面；任何援助将不胜感激。

前端 [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 [流程图表数据.php]

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

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

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

来自 process-chart-data.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 调用的响应，请参见下文。这成功显示图表并且与 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>

标签： javascriptphpjsonajaxgoogle-visualization

解决方案

看来 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"}]

还有为什么使用 async:false

看看这个
你应该使用异步然后调用成功success:function(data){/*call chart foramtting*/}

async (默认：true) 类型：Boolean 默认情况下，所有请求都是异步发送的（即默认设置为true）。如果您需要同步请求，请将此选项设置为 false。跨域请求和 dataType: "jsonp" 请求不支持同步操作。请注意，同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。从 jQuery 1.8 开始，不推荐在 jqXHR ($.Deferred) 中使用 async: false ；您必须使用成功/错误/完成回调选项而不是 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});});

推荐阅读