莫里斯图表不更新(morris chart not updating)

我有更新我的问题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);

解

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

Answer 1:

您的response.jsString仍然是一个字符串，它不是用于该接受的参数setData函数（它必须是散列数组的数组）。

不幸的是，你不能JSON解析jsString字符串，因为你的钥匙不是字符串（这是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和a 。 现在正在构建的字符串是正确的JSON。 现在，你应该能够做到这一点。

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

文章来源: morris chart not updating