莫里斯数据

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}]] 

这不是什么的data财产10方法期望。

因此，解决办法是更换data: [result]，与data: result,

这应该工作。

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

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