莫里斯图表不更新 [英] morris chart not updating
问题描述
我有更新我的 morris.js 条形图的一个问题。
在页面加载后，我有以下功能，工作正常，并创建了一个很好的图表：
$（文件）。就绪（函数（）{
如果（$（'。projectViewTotal'）。长度）{
图= Morris.Bar（{
元素：LastIncome，
数据： [
{Y：'04 -02-2014'，一：3}，
{Y：'04 -03-2014'，一：10}，
{Y：'04 -04-2014'，一：5}，
{Y：'04 -05-2014'，一：17}，
{Y：'04 -06-2014'，一：6}
]
x键：'Y'，
ykeys：['一']，
标签：['访问']
}）;
};
}）;
然后某个用户操作后，我通过AJAX获取新的数据，并想更新我的图表，但遗憾的是没有数据显示的更新后的图表中，标签只是未定义。我也没有错误通过控制台。
然后我更新图表所示：
VAR响应= $ .parseJSON（内容）;
的console.log（响应）;
chart.setData（response.jsString）;
当我CONSOLE.LOG我阿贾克斯的答案我有这样的数据结构，例如：
对象{jsString：[{Y：'2014年'，一：3505}，{Y：'2013'，一：0}，{Y：'2012'，一：0} {Y：'2011'，一：0}]，排序：getLastIncome}
但正如我说我只是得到了一个未定义的标签和图表里面没有数据。
如果我用 chart.setData（）宽的硬codeD采样数据也一切工作正常。因此，它必须与我从 response.jsString 得到字符串，但我已经用 $。parseJSON 的回调，所以我真的不知道是哪里的问题可能是。
你有什么想法，其中的误差可能是什么？谢谢！
下面是我的服务器端的PHP code：
$ ausgabeJS =[;
$金额=计数（$的数据）;
$ i = 1;
（数据$为$关键=＆GT; $值）的foreach {
如果（$ I＆LT; $金额）{
$ ausgabeJS ={Y：'$关键。，一个$值。}，。
} 其他 {
$ ausgabeJS ={Y：'$关键。，一个$值。}。
}
$ I ++;
}
$ ausgabeJS =]。
$ responseArray =阵列（
jsString=＆GT; $ ausgabeJS，
之类的=＆GT; $方法
）;
$结果= json_en code（$ responseArray）;
解决方案：
而不是一个字符串像JTG建议，我不得不改变我的服务器端code，创建一个数字数组
。以下是更新code：
$ data_array中=阵列（）;
（数据$为$关键=＆GT; $值）的foreach {
$ AR =阵列（
Y=＆GT; $关键，
一个=＆GT; $值
）;
array_push（$ data_array中，$ AR）;
}
$ responseArray =阵列（
jsString=＆GT; $ data_array中，
之类的=＆GT; $方法
）;
$结果= json_en code（$ responseArray）;
您 response.jsString 仍然是一个字符串，它不是为<$公认的参数C $ C>使用setData 函数（它必须是哈希数组的数组）。
不幸的是，你不能JSON解析 jsString 字符串，因为你的钥匙不是字符串（这是JSON的要求），因此，让你的钥匙串，像这样在你的服务器端
{jsString：'[{Y：2014年，一：2505}，{Y：2014年，一：2505}，{ Y：2014年，一：2505}]'，排序：getLastIncome}
和那么你应该能够将数据添加到您的图
chart.setData（$ parseJSON（response.jsString）。）;
让我知道，如果不工作
编辑：好了，所以我们有两个选择
。首先，你可以改变你的PHP code为
$ data_return = [];
（数据$为$关键=＆GT; $值）的foreach {
array_push（$ data_return，阵列（Y=＆GT; $键，一个=＆GT; $值））;
}
$ responseArray =阵列（
jsString=＆GT; $ data_return，
之类的=＆GT; $方法
）;
$结果= json_en code（$ responseArray）;
我不能肯定这会工作，我认为这是值得一试的，因为你没有建立，将有被解析两次的字符串。
不过，如果还是不行，你可以随时与我原来的建议，并把你的哈希阵的钥匙到字符串本身就像这样：
的foreach（$数据，$关键=＆GT; $值）{
如果（$ I＆LT; $金额）{
$ ausgabeJS ={'Y'：'$关键。'，'一'：$值。}，。
} 其他 {
$ ausgabeJS ={'Y'：'$关键。'，'一'：$值。}。
}
$ I ++;
}
注意周围的 y中的额外的单串引号和 A 。现在正在构建的字符串是正确的JSON。现在，你应该能够做到这一点。
VAR响应= $ .parseJSON（内容）;
的console.log（响应）;
chart.setData（$ parseJSON（response.jsString））;
I have a problem with updating my morris.js bar chart.
When the page loads, I have the following function, which works fine and creates a nice chart:
$(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']
});
};
});
Then after some user action I get new data via ajax and want to update my chart, but unfortunately after the update no data is shown in the chart and the labels are just undefined. I also get no error via the console.
and then I update the chart like this:
var response = $.parseJSON(content);
console.log(response);
chart.setData(response.jsString);
When I console.log my ajax answer I have this data structure for example:
Object {jsString: "[ { y: '2014', a: 3505},{ y: '2013', a: 0},{ y: '2012', a: 0},{ y: '2011', a: 0} ]", sort: "getLastIncome"}
But as I said I just get undefined labels and a chart with no data inside.
If I use chart.setData() width hard coded sample data everything also works fine. So it must be with the string I get from response.jsString, but I already used $.parseJSON on the callback, so I really don't know where the problem might be.
Do you have any ideas where the error might be? Thank you!
Here is my server side php code:
$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
Like JTG suggested, I had to change my server side code, to create a numeric array instead of a string. Here is the updated code:
$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 is still a string, which isn't the accepted parameter for the setData function (it has to be an array of hash arrays).
Unfortunately, you can't JSON parse the jsString string because your keys aren't strings (which is a requirement for JSON) So make your keys strings, like so on your server side
{jsString: '[{"y": "2014", "a":2505}, {"y": "2014", "a":2505}, {"y": "2014", "a":2505}]', sort: "getLastIncome"}
And then you should be able to add the data to your graph
chart.setData($.parseJSON(response.jsString));
Let me know if that doesn't work
EDIT: Okay so we have two options.
First, you could change your php code to be
$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);
I'm not certain this will work, I think it's worth a try because you aren't building a string that will have to be parsed twice.
But if that doesn't work, you can always go with my original suggestion and turn the keys of your hash array into strings themselves like so:
foreach ($data as $key => $value) {
if($i < $amount) {
$ausgabeJS .= "{ 'y': '".$key."', 'a': ".$value."},";
} else {
$ausgabeJS .= "{ 'y': '".$key."', 'a': ".$value."}";
}
$i++;
}
notice the extra single string quotes around the y and a. Now the string you are building is proper JSON. Now you should be able to do this.
var response = $.parseJSON(content);
console.log(response);
chart.setData($parseJSON(response.jsString));
这篇关于莫里斯图表不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
