Question

我的控制器中有以下代码......

    public ActionResult GetData()
    {
        var data = new[] {new Entry() {value = 20, year = 2008}, new Entry() {value = 10, year = 2009}};

        return Json(data, JsonRequestBehavior.AllowGet);
    }

    public class Entry
    {
        public int year { get; set; }
        public int value { get; set; }
    }

这在我看来......

<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.5.1.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.5.1.min.js"></script>

<script type="text/javascript">
    $.get('@Url.Action("GetData")', function (result) {
             Morris.Line({
                element: 'mysecondchart',
                data: [result],
                xkey: 'year',
                ykeys: ['value'],
                labels: ['Value']
            });
    });
</script>

在调试模式下，我可以看到触发了GetData但没有显示图表。那是为什么？

Answer 1

你的action方法返回一个项集合，ajax方法回调函数的result参数是数组，就像这样

[{"year":2008,"value":20},{"year":2009,"value":10}]

当你使用表达式[result]时，它将现有数组包装到一个新数组中，因此你将得到一个这样的嵌套数组

[[{"year":2008,"value":20},{"year":2009,"value":10}]]

这不是data方法的Line属性所期望的。

因此，解决方案是使用data: [result]

替换data: result,

这应该有用。

$.get('@Url.Action("GetData")', function (result) {

     Morris.Line({
        element: 'mysecondchart',
        data: result,
        xkey: 'year',
        ykeys: ['value'],
        labels: ['Value']
    });
});

morris数据不在mvc视图中显示

1 个答案: