jquery - 莫里斯图未更新

Question

我在更新 morris.js 条形图时遇到问题。

当页面加载时，我有以下函数，它运行良好并创建了一个漂亮的图表:

$(document).ready(function() {
    if($('.projectViewTotal').length) {
        chart = Morris.Bar({
          element: 'LastIncome',
          data: [
              { y: '04-02-2014', a: 3 },
              { y: '04-03-2014', a: 10 },
              { y: '04-04-2014', a: 5 },
              { y: '04-05-2014', a: 17 },
              { y: '04-06-2014', a: 6 }
            ],
          xkey: 'y',
          ykeys: ['a'],
          labels: ['Visits']
        });
    };
});

然后，在一些用户操作之后，我通过 ajax 获取新数据并想要更新我的图表，但不幸的是，更新后图表中没有显示任何数据，并且标签只是未定义。我也通过控制台没有收到任何错误。

然后我像这样更新图表:

var response = $.parseJSON(content);
console.log(response);
chart.setData(response.jsString);

当我 console.log 我的 ajax 答案时，我有这个数据结构，例如:

对象 {jsString: "[ { y: '2014', a: 3505},{ y: '2013', a: 0},{ y: '2012', a: 0},{ y : '2011', a: 0} ]", sort: "getLastIncome"}

但正如我所说，我只是得到未定义的标签和内部没有数据的图表。

如果我使用 chart.setData() 宽度硬编码示例数据，一切都可以正常工作。所以它一定是我从 response.jsString 得到的字符串，但我已经在回调中使用了 $.parseJSON ，所以我真的不知道问题出在哪里是。

您知道错误可能出在哪里吗？谢谢!

这是我的服务器端 php 代码:

$ausgabeJS = "[ ";
$amount = count($data);
$i = 1;
foreach ($data as $key => $value) {
    if($i < $amount) {
       $ausgabeJS .= "{ y: '".$key."', a: ".$value."},";
    } else {
       $ausgabeJS .= "{ y: '".$key."', a: ".$value."}";
    }
    $i++;
}
$ausgabeJS .= " ]";
$responseArray = array(
   "jsString" => $ausgabeJS,
   "sort" => $method
 );
$result = json_encode($responseArray);

解决方案

就像 JTG 建议的那样，我必须更改服务器端代码，以创建一个数字数组而不是字符串。这是更新后的代码:

$data_array = array();
foreach ($data as $key => $value) {
   $ar = array(
      "y" => $key,
      "a" => $value
   );
   array_push($data_array, $ar);
}
$responseArray = array(
   "jsString" => $data_array,
   "sort" => $method
);
$result = json_encode($responseArray);

Answer 1

您的 response.jsString 仍然是一个字符串，它不是 setData 函数接受的参数(它必须是哈希数组的数组)。

不幸的是，您无法使用 JSON 解析 jsString 字符串，因为您的 key 不是字符串(这是 JSON 的要求)，因此请让您的 key 成为字符串，就像在服务器端那样

{jsString: '[{"y": "2014", "a":2505}, {"y": "2014", "a":2505}, {"y": "2014", "a":2505}]', sort: "getLastIncome"}

然后您应该能够将数据添加到图表中

chart.setData($.parseJSON(response.jsString));

如果这不起作用，请告诉我

编辑:好的，我们有两个选择。

首先，您可以将 php 代码更改为

$data_return = [];
foreach ($data as $key => $value) {
    array_push($data_return, array("y" => $key, "a" => $value));
}

$responseArray = array(
   "jsString" => $data_return,
   "sort" => $method
 );
$result = json_encode($responseArray);

我不确定这是否有效，我认为值得一试，因为您没有构建一个必须解析两次的字符串。

但是如果这不起作用，您可以随时按照我最初的建议将哈希数组的键转换为字符串本身，如下所示:

foreach ($data as $key => $value) {
    if($i < $amount) {
       $ausgabeJS .= "{ 'y': '".$key."', 'a': ".$value."},";
    } else {
       $ausgabeJS .= "{ 'y': '".$key."', 'a': ".$value."}";
    }
    $i++;
}

请注意 y 和 a 周围额外的单字符串引号。现在您正在构建的字符串是正确的 JSON。现在您应该能够做到这一点。

var response = $.parseJSON(content);
console.log(response);
chart.setData($parseJSON(response.jsString));