MVC 5 (Razor)使用morris面积图在视图中显示数据库数据

<link rel="stylesheet" href="path/to/morris.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/raphael.min.js"></script>
<script src="path/to/morris.min.js"></script>

public ActionResult Index()
{
    // 从数据库中获取数据
    var data = db.MyData.ToList();

    // 将数据转换为Morris面积图所需的格式
    var chartData = new List<object>();
    foreach (var item in data)
    {
        chartData.Add(new { x = item.Date, y = item.Value });
    }

    ViewBag.ChartData = chartData;

    return View();
}

<script>
$(function () {
    new Morris.Area({
        element: 'chart',
        data: @Html.Raw(Json.Encode(ViewBag.ChartData)),
        xkey: 'x',
        ykeys: ['y'],
        labels: ['Value']
    });
});
</script>

<div id="chart"></div>