通过JSON数据问题，动态构建morris.js剧情 [英] Issues passing json data to build morris.js plot dynamically
问题描述
我想用AJAX，PHP和MySQL动态地构建一个morris.js情节。
我一直在寻找，但没有成功如何实现这一点。
我得到的阵列数据成功地与阿贾克斯，但现在我不能将这些数据构建的情节。
从PHP脚本我碰到下面的JSON数组：
<$p$p><$c$c>[{"concurso":"2736","R1":"7","R2":"24","R3":"27","R4":"39","R5":"45","R6":"52","R7":"12"},{"concurso":"2737","R1":"16","R2":"19","R3":"23","R4":"29","R5":"33","R6":"49","R7":"36"},{"concurso":"2738","R1":"4","R2":"6","R3":"20","R4":"21","R5":"45","R6":"55","R7":"38"},{"concurso":"2739","R1":"5","R2":"16","R3":"17","R4":"24","R5":"41","R6":"47","R7":"36"},{"concurso":"2745","R1":"1","R2":"13","R3":"19","R4":"29","R5":"41","R6":"46","R7":"50"}]
在哪里morris.js的是的是后面的值concurso'，而 ykeys 的是值后的 R1 的 R2 ， R3 的，... R7 的。
我的jQuery如下至今：
$。阿贾克斯（{
网址：AJAX / default_chart_numbers.php
缓存：假的，
数据类型：JSON，
超时：3000，
成功：功能（数据）{
新Morris.Line（{
//在其中绘制图表元素的ID。
元素：revancha，
数据：$ .parseJSON（数据），
x键：concurso，
ykeys：['R1'，'R 2'，'R 3'，'4'，'R 5'，'6'，'R 7']，
标签：['N1'，'N2'，'N3'，'N4'，'N5'，'N6'，'N7']，
hideHover：自动，
调整：真正的
}）;
}，
错误：函数（xmlHtt prequest，textStatus，errorThrown）{
警报（错误+ errorThrown）;
如果（textStatus ===超时）
警报（请求超时）;
}
}）;
我看不到的情节。什么也没有。我在想什么？
好了，幸运的是我可以自己修复。这是我工作的jQuery☺：
$。阿贾克斯（{
网址：AJAX / some_handler.php
缓存：假的，
键入：POST，
数据：{anyVar：specialValue4PHPScriptAndDataBaseFilter}，
数据类型：JSON，
超时：3000，
成功：功能（数据）{
//console.log(data）;警报（JSON.stringify（数据））;
Morris.Line（{
元素：TheElementName，
数据：数据，
x键：someID，
ykeys：['R1'，'R 2'，'R 3'，'4'，'R 5'，'6'〕，
标签：['N1'，'N2'，'N3'，'N4'，'N5'，'N6']，
hideHover：自动，
调整：真正的
}）;
}，
错误：函数（xmlHtt prequest，textStatus，errorThrown）{
警报（错误+ errorThrown）;
如果（textStatus ===超时）
警报（请求超时）;
} / *参考资料：http://stackoverflow.com/questions/22746646/ajax-i-cant-get-data-from-php-by-using-json-en$c$c*/
}）;
您可以使用使用setData（）功能上的Morris.Line返回的对象来更新数据。下面是我评论过莫里斯的例子的一个片段。 （ https://github.com/morrisjs/morris.js/ BLOB /主/例子/ updating.html ）
//创建数组充满了占位符数据
变种nReloads = 0;
函数数据（偏移）{
VAR RET = [];
为（变种X = 0 X - 其中= 360; X + = 10）{
变种V =（偏移+ X）％360;
ret.push（{
X：X，
ÿ的：Math.sin（Math.PI *体积/ 180）.toFixed（4），
Z：Math.cos（Math.PI *体积/ 180）.toFixed（4）
}）;
}
返回RET;
}
//创建莫里斯图。
VAR图= Morris.Line（{
元素：'图'，
数据：数据（0），
x键：'×'，
ykeys：['Y'，'Z']，
标签：['罪（）'，'导向（）']，
parseTime：假的，
YMIN：-1.0，
YMAX：1.0，
hideHover：真
}）;
//更新图表用新的数据。
功能更新（）{
nReloads ++;
//称为返回Morris.Line对象上。
graph.setData（数据（5 * nReloads））;
$（'＃reloadStatus）文本（nReloads +重载）。
}
的setInterval（更新，100）;
I want to build a morris.js plot dynamically by using ajax, php, and mysql.
i have been searching with no success how to achieve this.
I get the array data successfully with ajax but now i can't pass these data to build the plot.
From the PHP script i get the following json array:
[{"concurso":"2736","R1":"7","R2":"24","R3":"27","R4":"39","R5":"45","R6":"52","R7":"12"},{"concurso":"2737","R1":"16","R2":"19","R3":"23","R4":"29","R5":"33","R6":"49","R7":"36"},{"concurso":"2738","R1":"4","R2":"6","R3":"20","R4":"21","R5":"45","R6":"55","R7":"38"},{"concurso":"2739","R1":"5","R2":"16","R3":"17","R4":"24","R5":"41","R6":"47","R7":"36"},{"concurso":"2745","R1":"1","R2":"13","R3":"19","R4":"29","R5":"41","R6":"46","R7":"50"}]
Where morris.js y is the value after 'concurso', and ykeys are the values after R1, R2, R3, ... R7.
My jQuery looks like this so far:
$.ajax({
url: "ajax/default_chart_numbers.php",
cache: false,
dataType: "json",
timeout:3000,
success : function (data) {
new Morris.Line({
// ID of the element in which to draw the chart.
element: 'revancha',
data: $.parseJSON(data),
xkey: 'concurso',
ykeys: ['R1', 'R2', 'R3', 'R4', 'R5', 'R6', 'R7'],
labels: ['n1', 'n2', 'n3', 'n4', 'n5', 'n6', 'n7'],
hideHover: 'auto',
resize: true
});
},
error : function (xmlHttpRequest, textStatus, errorThrown) {
alert("Error " + errorThrown);
if(textStatus==='timeout')
alert("request timed out");
}
});
I can't see the plot. There's nothing. What am i missing?
Well, fortunately i could fix it myself. Here is my working jQuery ☺:
$.ajax({
url: "ajax/some_handler.php",
cache: false,
type: "POST",
data: {anyVar: 'specialValue4PHPScriptAndDataBaseFilter'},
dataType: "json",
timeout:3000,
success : function (data) {
//console.log(data); alert(JSON.stringify(data));
Morris.Line({
element: 'TheElementName',
data: data,
xkey: 'someID',
ykeys: ['R1', 'R2', 'R3', 'R4', 'R5', 'R6'],
labels: ['n1', 'n2', 'n3', 'n4', 'n5', 'n6'],
hideHover: 'auto',
resize: true
});
},
error : function (xmlHttpRequest, textStatus, errorThrown) {
alert("Error " + errorThrown);
if(textStatus==='timeout')
alert("request timed out");
} /*References: http://stackoverflow.com/questions/22746646/ajax-i-cant-get-data-from-php-by-using-json-encode*/
});
You can use the setData() function on the Morris.Line returned object to update data. Here is a snippet from the morris examples which I've commented. (https://github.com/morrisjs/morris.js/blob/master/examples/updating.html)
// build array filled with placeholder data
var nReloads = 0;
function data(offset) {
var ret = [];
for (var x = 0; x <= 360; x += 10) {
var v = (offset + x) % 360;
ret.push({
x: x,
y: Math.sin(Math.PI * v / 180).toFixed(4),
z: Math.cos(Math.PI * v / 180).toFixed(4)
});
}
return ret;
}
// create the morris chart.
var graph = Morris.Line({
element: 'graph',
data: data(0),
xkey: 'x',
ykeys: ['y', 'z'],
labels: ['sin()', 'cos()'],
parseTime: false,
ymin: -1.0,
ymax: 1.0,
hideHover: true
});
// update the chart with the new data.
function update() {
nReloads++;
// called on the returned Morris.Line object.
graph.setData(data(5 * nReloads));
$('#reloadStatus').text(nReloads + ' reloads');
}
setInterval(update, 100);
这篇关于通过JSON数据问题，动态构建morris.js剧情的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
