莫里斯數據

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