莫里斯图未更新

我的更新有问题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 获取新数据并想要更新我的图表，但不幸的是更新后图表中没有显示任何数据，标签只是undefined。我也通过控制台没有收到任何错误。

然后我像这样更新图表：

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

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

Object {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);

SOLUTION

就像 JTG 建议的那样，我必须更改我的服务器端代码，以创建一个numeric array代替string。这是更新后的代码：

$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);

Your response.jsString仍然是一个字符串，这不是可接受的参数setData函数（它必须是哈希数组的数组）。

不幸的是，你无法解析 JSONjsStringstring 因为你的键不是字符串（这是 JSON 的要求）所以让你的键为字符串，就像在你的服务器端一样

{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 and a。现在您正在构建的字符串是正确的 JSON。现在您应该能够做到这一点。

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