无法让谷歌图表从 ajax 工作，不是数组，当我直接回显数据时工作答案

【问题标题】：Can not get google charts to work from ajax, getting not an array, works when I echo data directly无法让谷歌图表从 ajax 工作，不是数组，当我直接回显数据时工作
【发布时间】：2016-11-25 15:46:25
【问题描述】：

第一个问题，但我多年来一直在编写 PHP/HTML/JS 等代码。

我已经搜索和谷歌搜索了最好的一天，我在这里找到了关于这个主题的多个答案，但是没有一个解决方案对我的情况有帮助。

我使用谷歌图表来创建玩家评分的折线图。 - 当我在服务器上生成数据并直接在页面中打印时，这非常有效。 - 如果我通过 ajax 调用调用服务器端方法来获取数据，我会在控制台中收到响应“未捕获的错误不是数组”。

据我所见，数据是相同的，json 在这两种情况下都可以验证，我已经在服务器上使用 json_encode 和在 javascript 中使用 $.parseJSON 进行了尝试，并且没有进行所有组合。没有运气。

当我在服务器上生成页面时，当该页面将数据添加到调用中时，这就是我的调用方式，这是可行的。

var data = google.visualization.arrayToDataTable(<?php echo $this->data['rating_data'] ?>);

由于我需要从用户列表中调用它，当您单击用户时，我使用 ajax 调用来获取数据并使用 javascript 调用 drawChart(iID)，这不起作用：

function drawChart(iId) {
                var jsonData = $.ajax({
                      url: "xxxxxxxxxxx/getRatingForPlayer&playerId="+iId,
                      dataType: "json",
                      async: false
                }).responseText;

var data = google.visualization.arrayToDataTable($.parseJSON(jsonData));

（上面的网址当然是匿名的）我已经在控制台和警报中转储了 jsonData 中的内容，并且每次我都会从服务器获得相同的有效 JSON 回复，将该代码硬粘贴到调用 arrayToDataTable 中并且它可以工作，但当它被放置在变量 jsonData 中时却不行。

如果我将以上内容更改为 var data = new google.visualization.DataTable(jsonData); 现在我不再收到“不是数组”的错误，但是，我收到了“table ahs no columns”错误。由于我的两个用例的服务器端响应相同，因此如果语法不同，我真的不想重写它。我试图将返回的字符串的引号更改为使用 " inside 而不是 ' 这没有帮助。

我从服务器调用返回的数据是相同的，无论我是在页面加载时抓取它，还是通过服务器端调用。它看起来像这样（是的，日期值应该是空的，除了开始和结束）我已经通过 JSONlint 对其进行了验证，它报告为有效的 JSON

"[['Session date','Player Rating'],['2016-10-01 00:00:00',1500],['',1519],['',1496],['',1508],['2016-11-11 16:20:39',1432]]"

上面的字符串在服务器上是这样生成的（当然只是较大代码的一部分）：

public function getRatingForPlayer(){
    $playerId = $this->request->get['playerId'];
    $rating_data = $this->hov->api_user_getPlayerRatingHistory($playerId);
    $sRating = $this->mapChartString($rating_data);
    //$this->data['rating_data'] = json_encode($sRating, JSON_PRETTY_PRINT); 
    $this->response->addHeader('Content-Type: application/json');
    $this->response->setOutput(json_encode($sRating, JSON_NUMERIC_CHECK));
}
public function mapChartString($data){      
    $last = sizeof($data['rating'])-1;
    $string = "[['Session date','Player Rating'],";
    foreach ($data['rating'] as $key => $value) {
        if( ($key == 0) || ($key == $last)){
            $date_string = $data['created'][$key];
        }else{
            $date_string = '';
        }
        $string .= "['".$date_string."',".$value."],";          
    }
    $string = rtrim($string, ",");
    $string .= "]";
    return $string;
}

如上所述，当我使用 echo/print 将其放入页面时，它的输出效果很好，但不是因为它来自 ajax 调用并放置在 js 变量中。这即使返回的数据在视觉上是相同的并且都可以验证。

我什至拼命尝试在使用 $.parseJSON(jsonData) 之前和/或之后将 json 对象重新映射到一个数组，这显然根本不起作用。

所以在这一点上我很难过。这个问题完美地映射到这个问题： Google Chart - uncaught error: not an array 这就是我从 + 在服务器上正确编码它的提示中得到 $.parseJSON(jsonData) 的地方。但这无济于事，所以我必须在这里遗漏其他东西。

非常感谢所有的帮助。 /丹

【问题讨论】：

标签： javascript php

【解决方案1】：

自然，当您发布问题时，您会开始以不同的方式思考它。刚发完Q就解决了。

我做了以下事情：由于对 arrayToDataTable 的调用和随后的绘制图表的调用直接触发，它可能还没有从 ajax 调用中填充。因此，我在 ajax 调用的成功成员中添加了一个回调，并将所有调用移至该回调。这是为了确保 ajax 实际上已经返回了一些东西。像这样：

function drawChart(iId) {
                var jsonData = $.ajax({
                      url: "XXXXXXXXXXXX/getRatingForPlayer&playerId="+iId,
                      dataType: "json",
                      async: false ,
                      success: function(jsonData) {
                      var data = google.visualization.arrayToDataTable($.parseJSON(jsonData));

                        var options = {
                          backgroundColor: 'transparent',
                          colors:['#73B322'],
                          explorer: { actions: ['dragToZoom', 'rightClickToReset'] },
                          legend:{position: 'top', textStyle: {color: '#73B322', fontSize: 16}},
                          hAxis: {textStyle:{color: '#C9E093'}},
                          vAxis: {textStyle:{color: '#C9E093'}}
                        };

                        var chart = new google.visualization.LineChart(document.getElementById('rating_chart'));

                        chart.draw(data, options);
                      }
                }).responseText;

这给了我一个意外令牌的 JSON 错误，然后在 PHP 代码中解决了这个错误，以返回 " 而不是 ' 以将字符串包含在生成的 json 中。

现在一切都如我所愿。希望解决方案对其他人有所帮助。 /丹

【讨论】：