JSON JQuery & 莫里斯图表

Question

我正在尝试将 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 字符串插入莫里斯图的数据 : [ ] 部分，效果完美。但是使用 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 & 莫里斯图表

JSON JQuery & Morris Chart

ajax

jquery

json

morris.js