Question

我试图在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"}

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

Answer 1

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);

    }
});

JSON JQuery＆amp;莫里斯图

1 个答案: