問題通過json數據動態構建morris.js圖

Question

我想通過使用ajax，php和mysql動態構建morris.js圖。

我一直在尋找不成功如何實現這一目標。

我用ajax成功獲取數組數據，但現在我無法傳遞這些數據來構建圖。

從PHP腳本我碰到下面的JSON數組：

[{"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({ 
    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"); 
} 
}); 

我無法看到的情節。什麼也沒有。我錯過了什麼？

好吧，幸運的是我可以自己修復它。這是我工作的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*/ 
}); 

Answer 1

您可以使用在Morris.Line的setData()函數返回對象更新數據。這裏是我評論過的莫里斯例子的片段。 （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);