本文介绍了通过JSON数据问题,动态构建morris.js剧情的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想用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剧情的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-18 04:34