javascript - ASP.NET MVC 序列化数据到 morris 面积图

Question

我尝试使用莫里斯面积图，我不知道如何正确序列化数据和发送莫里斯面积图可以理解的日期。

这是 HomeController 中从数据库获取数据的方法。

public ActionResult GetData()
    {
        List<GraphData> GraphDataList = new List<GraphData>();

        var user = db.Users.Where(p => p.Email == User.Identity.Name).Single();
        var Requests = db.Transactions.Where(p => p.Package_id != null && p.User_id == user.Id);
        DateTime day = new DateTime();
        int CountPerDay = 0;
        // count of request per day
        foreach (var request in Requests)
        {
            if (day.Year == request.Date.Year && day.Day == request.Date.Day)
            {
                CountPerDay++;
            }
            else
            {
                // To 2016-12-03 format of date
                string Date = day.Year + "-" + day.Month + "-" + day.Day;
                GraphDataList.Add(new GraphData(Date, CountPerDay));
                CountPerDay = 0;
                day = request.Date;
            }
        }
        // First elem in list is wrong
        GraphDataList.RemoveAt(0);
        return Json(GraphDataList, JsonRequestBehavior.AllowGet);
    }

图形数据类

    public class GraphData
{
    public string label { get; set; }
    public int value { get; set; }

    public GraphData(string label, int value)
    {
        this.label = label;
        this.value = value;
    }

    public GraphData()
    {
    }
}

html代码中的面积图

        <div class="col-lg-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Request statistic
                </div>
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <div id="area-example"></div>
                </div>
                <!-- /.panel-body -->
            </div>
            <!-- /.panel -->
        </div>

以及从 Controller 获取数据并发送到 Morris.Area 的函数

    <!--Get Data for Graph-->
<script type="text/javascript">
    $(document).ready(function() {
        $.get('@Url.Action("GetData","Home")', function (result) {

            new Morris.Area({
                // ID of the element in which to draw the chart.
                element: 'area-example',
                // Chart data records -- each entry in this array corresponds to a point on
                // the chart.
                data: [result],
                // The name of the data record attribute that contains x-values.
                xkey: 'label',
                ykeys: ['value'],
                labels: ['Success requests'],
                pointSize: 2,
                hideHover: 'auto',
                resize: true
            });
    });
});
</script>

所以结果是没有图表的清晰面板

但是如果像这样初始化数据

    <!--Get Data for Graph-->
<script type="text/javascript">
    $(document).ready(function() {
        $.get('@Url.Action("GetData","Home")', function (result) {

            new Morris.Area({
                // ID of the element in which to draw the chart.
                element: 'area-example',
                // Chart data records -- each entry in this array corresponds to a point on
                // the chart.
                data: [
                  { label: '2016-12-3', value: 150},
                  { label: '2016-12-4', value: 221},
                  { label: '2016-12-5', value: 43},
                  { label: '2016-12-6', value: 21},
                  { label: '2016-12-7', value: 312}
                ],
                // The name of the data record attribute that contains x-values.
                xkey: 'label',
                ykeys: ['value'],
                labels: ['Success requests'],
                pointSize: 2,
                hideHover: 'auto',
                resize: true
            });
    });
});
</script>

结果是

Answer 1

解决方案是使用它，因为您已经使用 ajax 调用返回了一个 json 数组。所以，你不需要data:[result]，你需要的只是data:result。

new Morris.Area({
          // ID of the element in which to draw the chart.
          element: 'area-example',
          // Chart data records -- each entry in this array corresponds to a point on
          // the chart.
          data: result,
          // The name of the data record attribute that contains x-values.
          xkey: 'label',
          ykeys: ['value'],
          labels: ['Success requests'],
          pointSize: 2,
          hideHover: 'auto',
          resize: true
});