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获取新数据并想要更新我的图表，但遗憾的是，更新后图表中没有显示数据且标签只是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));

莫里斯图表没有更新

1 个答案: