morris 数据未显示在 mvc 视图中

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

您的操作方法返回一个项目集合，并且您的 ajax 方法回调函数的 result 参数是一个像这样的 数组

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

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

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

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

所以解决办法是把data: [result]，换成data: result,

这应该可行。

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

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