mvc 视图中未显示 morris 数据

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

你的操作方法 returns 项目的集合和你的 ajax 方法回调函数的 result 参数是一个 array 像这样

[{"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']
    });
});

mvc 视图中未显示 morris 数据

morris data not displayed in mvc view

asp.net-mvc

morris.js