JSON JQuery&莫里斯图

时间:2018-03-02 22:02:39

标签: jquery json ajax morris.js

我试图在morris图表中使用setData()函数,但我在使用json数据时遇到了一些问题。

没有setData(),这很有效......

        if ($('#morris-area-graph').length > 0) {
        var labelColor = $('#morris-area-graph').css('color');
        var Chart = Morris.Area({
            element: 'morris-area-graph',
            behaveLikeLine: true,
            data: [
                {"x":"1:00am","y":"5.5"},{"x":"2:00am","y":"4.2"}

            ],
            xkey: 'x',
            parseTime: false,

            ykeys: ['y'],
            labels: ['Glucose Level'],
            gridTextColor: labelColor,
            lineColors: $('#morris-area-graph').data('colors').split(',')
        });
    }

这根本不起作用......

        $.ajax({
        type: "GET",
        url: "http://url/jsontest.php",
        success: function (result) {
            console.log(result);

            Chart.setData(result);
        }
    });

    // Morris Area demo
    if ($('#morris-area-graph').length > 0) {
        var labelColor = $('#morris-area-graph').css('color');
        var Chart = Morris.Area({
            element: 'morris-area-graph',
            behaveLikeLine: true,
            data: [
                {"x":"1:00am","y":"5.5"},{"x":"2:00am","y":"4.2"}

            ],
            xkey: 'x',
            parseTime: false,

            ykeys: ['y'],
            labels: ['Glucose Level'],
            gridTextColor: labelColor,
            lineColors: $('#morris-area-graph').data('colors').split(',')
        });
    }

如上所示,获取php文件输出的json字符串并将其插入数据:[] morris图表的一部分,效果很好。但是,使用setData函数,我得到未定义的点,图表不显示任何数据。

我可以将php文件输出为json:

[{"x":"1:00am","y":"5.5"},{"x":"2:00am","y":"4.2"}]

{"x":"1:00am","y":"5.5"},{"x":"2:00am","y":"4.2"}

似乎都不起作用。但是如果数据中的第二个正常工作:[]静态地作为字符串。

1 个答案:

答案 0 :(得分:0)

jQuery的$.ajax()函数默认不解析JSON字符串,这可能是您的脚本失败的原因。

所以,你要么:

a)手动解析您的JSON响应:

$.ajax({
    type: "GET",
    url: "http://url/jsontest.php",
    success: function (result) {

        var data = JSON.parse( result );
        console.log(data);

        if ( data ) {
            Chart.setData(data);
        }

    }
});

...或者b)改为使用$.getJSON(),它会自动解析JSON字符串:

$.getJSON(
    "http://url/jsontest.php",
    function (result) {

        console.log(result);
        Chart.setData(result);

    }
});