ASP.NET MVC序列化数据到莫里斯面积图

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

图表数据class

    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>

以及从控制器获取数据并发送到 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
});

ASP.NET MVC序列化数据到莫里斯面积图

ASP.NET MVC serialize data to morris area chart

javascript

c#

asp.net-mvc

jquery

morris.js