如何将动态数据添加到莫里斯条形图

Question

我想通过 ajax 向 Morris 条形图添加数据。以下是我在 ajax 成功

中获得的 json

[{"x":"2014-10-02","y":"1"},{"x":"2014-10-19","y":"1"},{"x":"2014-10-20","y":"1"},{"x":"2014-11-13","y":"1"}]

以下为js代码

var chart = Morris.Bar({
        element : 'normal-bar-graph',
        data : [{
            "x" : null,
            "y" : null
        }],
        xkey : 'x',
        ykeys : ['y'],
        labels : ['Added']
    });
$.ajax({
            type: "POST",
            url:  "some_url",
            data: {'user_report':[k,v]},

            success: function(html)                    
            {   
                if(html == "error")
                {
                alert('error');
                }
                else
                {
                    chart.setData(html);

                }
                hide_loading();
            }
        });

我正在使用 /morris/raphael.2.1.0.min.js 和 /morris/morris.min.js。 chart.setData(html); 功能不像 morris 文档中所说的那样工作。

提前致谢。如有错误请指出

如果有帮助的话也做了一个jsbin：morris

Answer 1

删除引号。 setData 需要一个数组。当您使用引号时，它会将其转换为字符串而不是数组。

像这样：chart.setData([{ "y": "2006", "a": 100, "b": 90 },{ "y": "2006", "a": 100, "b": 90 }]);

如何将动态数据添加到莫里斯条形图

how to add dynamic data to morris bar chart

ajax

jquery

morris.js