javascript - 莫里斯线图设置数据方法无法正常工作

Question

我有一个像这样的莫里斯线图设置:

 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

Answer 1

您的 Morris js 配置应与您的 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']