为 Morris 甜甜圈图设置数据

Question

I am trying to use a Morris Donut chart.

If i hard code the data as follows:

donutData = [{"label":"iPad Simulator:iOS:iPad Simulator x86_64","value":14},{"label":"android","value":6}];

 var chart =    Morris.Donut({
        element: 'morris-donut-chart',
        data: donutData,
        resize: true,
        parseTime:false
    });

it works fine. However, if i add a ajax call like below

var chart =    Morris.Donut({
        element: 'morris-donut-chart',
        data: donutData,
        resize: true,
        parseTime:false
    });


    $.ajax({ url: 'http://127.0.0.1:7101/MUDRESTService/rest/v1/feedbackdistribution?onlyData=true',
            
             type: 'get',  
             dataType: 'json',    
             success: function(output) {
                var ddata = JSON.stringify(output.items);
                ddata = ddata.replace(/Label/g,'label');
                 ddata = ddata.replace(/Value/g,'value');
                console.log(ddata);

                chart.setData(ddata);
}
});

Then it fails with errors:

Error: Invalid value for <path> attribute d="M,0,0"q @ raphael-min.js:10w @ raphael-min.js:10c._engine.path @ raphael-min.js:11v.path @ raphael-min.js:10b.DonutSegment.b.drawDonutArc @ morris.min.js:7b.DonutSegment.b.render @ morris.min.js:7b.Donut.d.redraw @ morris.min.js:6b.Donut.d.setData @ morris.min.js:7$.ajax.success @ morris-data.js:80j @ jquery.js:3094k.fireWith @ jquery.js:3206x @ jquery.js:8259(anonymous function) @ jquery.js:8600

Please note that ddata has exact same data.

Answer 1

尝试更换JSON.stringify由$.parseJSON ：

var ddata = $.parseJSON(output.items);

Answer 2

The problem was that ddata was treated as a string rather than an array.

I had to change the code as this:

var arr = [];
arr = ddata;
chart.setData(arr);