设置莫里斯甜甜圈图的数据

Question

我正在尝试使用 Morris Donut 图表。

如果我硬编码数据如下：

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

它工作正常。但是，如果我添加如下所示的 ajax 调用

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

然后失败并出现错误：

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

请注意，ddata 具有完全相同的数据。

Answer 1

尝试将 JSON.stringify 替换为 $.parseJSON:

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

Answer 2

问题是 ddata 被视为字符串而不是数组。

我不得不将代码更改为：

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

设置莫里斯甜甜圈图的数据

Setting Data for Morris Donut Chart

javascript

morris.js