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

【问题标题】：Google Charts - DataTable Issue with API Request and jQueryGoogle Charts - API 请求和 jQuery 的 DataTable 问题
【发布时间】：2020-05-28 20:31:58
【问题描述】：

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

Uncaught (in promise) SyntaxError: Unexpected token c in JSON at position 1 在 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>

后端 [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;
?>

来自 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 调用的响应，请参见下文。这样就成功显示了图表，和varchartData的值一致：

<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>

【问题讨论】：

你真的在某处使用JSON.parse()吗？在上面的代码中没有看到它。如果是这样，则不需要解析，数据表将接受 json 字符串。另外，async:false 已被弃用，请改用done promise 方法...
查看this answer 示例...
我已经更新了 charts-testing.php 以反映您发布的示例，但是，现在我从 Charts API 收到错误消息：表格没有列。×
此外，JSON.parse 似乎是由 Google Charts 的 JS 本地调用的，这似乎破坏了渲染。我根本没有调用该解析。
来自控制台的完整错误如下：Uncaught (in promise) SyntaxError: Unexpected token c in JSON at position 1 at JSON.parse (<anonymous>) at gvjs_Li (jsapi_compiled_default_module.js:55) at new gvjs_L (jsapi_compiled_default_module.js:161) at drawChart (charts-testing.php:17) gvjs_Li @ jsapi_compiled_default_module.js:55 gvjs_L @ jsapi_compiled_default_module.js:161 drawChart @ charts-testing.php:17 Promise.then (async) google.v.w.H.lo @ loader.js:317 (anonymous) @ charts-testing.php:8

标签： javascript php json ajax google-visualization

【解决方案1】：

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 开始，不推荐使用 async: false 和 jqXHR ($.Deferred)；你必须使用成功/错误/完成回调选项而不是 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});});

【讨论】：

JSON.parse 似乎是由 Google Charts 的 JS 本机调用的，这似乎破坏了渲染。
是的，需要通过在所有键和字符串周围添加双引号 " 来正确格式化 json，见上文...