2017-06-27 53 views
0

我有一個這樣的莫里斯線圖設置:不工作莫里斯線圖的數據集方法正確

var chart = new Morris.Line({ 
      // ID of the element in which to draw the chart. 
      element: 'myfirstchart', 
      // Chart data records -- each entry in this array corresponds to a point on 
      // the chart. 
      data: [ 
       { year: '1990', value: 20 }, 
       { year: '1991', value: 15 }, 
       { year: '1992', value: 20 }, 
       { year: '1993', value: 25 }, 
       { year: '1994', value: 11 }, 
       { year: '1995', value: 20 }, 
       { year: '1996', value: 15 }, 
       { year: '1997', value: 20 }, 
       { year: '1998', value: 16 }, 
       { year: '1999', value: 11 }, 
       { year: '2000', value: 13 }, 
       { year: '2001', value: 8 }, 
       { year: '2002', value: 11 }, 
        { year: '2003', value: 16 }, 
       { year: '2004', value: 10 }, 
       { year: '2005', value: 5 }, 
       { year: '2006', value: 5 }, 
       { year: '2007', value: 4 }, 
       { year: '2008', value: 8 }, 
       { year: '2009', value: 11 }, 
        { year: '2010', value: 16 }, 
       { year: '2011', value: 10 }, 
       { year: '2012', value: 5 }, 
       { year: '2013', value: 5 }, 

       { year: '2014', value: 20 } 
      ], 
      // The name of the data record attribute that contains x-values. 
      xkey: 'year', 
      // A list of names of data record attributes that contain y-values. 
      ykeys: ['value'], 
      // Labels for the ykeys -- will be displayed when you hover over the 
      // chart. 
      labels: ['Value'] 
     }); 

上面的數據顯示,僅僅是一些測試數據我隨機設置在圖中,這樣我可以看到它貌似....

我做一個POST方法到我的服務器的方法是這樣的:

$.post(url, $(this).serialize(), function (response) { 
    chart.setData(response); 
    // console.log(response); 
}); 

,動作和它返回什麼:

var groupedByDate = new List<GroupedByDate>(); 

而這個類中包含了這兩個屬性:

DateTime TransactionDate; 
int Sales; 

我返回結果的方式是這樣的:

return Json(groupedByDate); 

和日期的格式有這樣的:

6/20/2017 12:00:00 AM 

我在嘗試設置新數據源時遇到的錯誤是:

Uncaught TypeError: Cannot read property 'match' of undefined 
    at Object.b.parseDate (morris.min.js:6) 
    at c.<anonymous> (morris.min.js:6) 
    at c.b.Grid.d.setData (morris.min.js:6) 
    at Object.success (:598) 
    at i (jquery.min.js:2) 
    at Object.fireWith [as resolveWith] (jquery.min.js:2) 
    at A (jquery.min.js:4) 
    at XMLHttpRequest.<anonymous> (jquery.min.js:4) 

我在做什麼錯在這裏傢伙?有人可以幫我嗎 ?

@Dynamikus的迴應是:

(7) [Object, Object, Object, Object, Object, Object, Object] 

Each object looks like this: 


0: 
Object 
Date 
: 
"2017-06-20" 
Sales 
: 
6 
__proto__ 
: 
Object 
+1

確保響應是json格式。如果是這種情況,可以使用JSON.parse,並確保您擁有年份屬性的正確數據格式。 console.log顯示什麼? – Dynamikus

+0

@Dynamikus在這種情況下,我得到:Uncaught SyntaxError:在位置1的JSON中出現意外的令牌o – User987

+0

發生在您剛做console.log時?暫時忽略JSON.parse。 – Dynamikus

回答

1

你莫里斯爵士的配置應該符合你的JSON響應。在你的場景中

xkey: 'Date', 
    // A list of names of data record attributes that contain y-values. 
    ykeys: ['Sales'], 
    // Labels for the ykeys -- will be displayed when you hover over the 
    // chart. 
    labels: ['Date']