如何将数据库数据绑定到asp.net mvc中的图表

Question

我是asp.net MVC的新手。创建了一个数据库

在这里，我想显示特定月份出生的男性和女性的数量，如下所示。

所以我编写了如下代码，但我正在考虑这个非常漫长的过程。还有其他办法吗？ 我的观点模型

namespace Repository.ViewModels
{
    public class BarChartViewmodel2
    {

        public int mar = 0, jan = 0, feb = 0, apr = 0, may = 0,
            jun = 0, jul = 0, aug = 0, sep = 0, oct = 0, nov = 0, dec = 0, month1;
        public int March = 0, January = 0, February = 0, April = 0, May = 0, 
            June = 0, July = 0, August = 0, September = 0, October = 0, November = 0, 
            December = 0, month2;
    }
}

我的逻辑是

      public BarChartViewmodel2 Barchart2()
    {
        using (var db = new StudentDBContext())
        {
            BarChartViewmodel2 b = new BarChartViewmodel2();
            for (int i = 1; i <= 12; i++)
            {
                var data1 = db.Student.Where(c => c.Gender == "female" && c.DOB.Month == i).ToList();
                foreach (var item in data1)
                {
                   b.month1 = item.DOB.Month;

                    switch (b.month1)
                    {
                        case 1:
                            b.jan++;
                            break;
                        case 2:
                            b.feb++;
                            break;
                        case 3:
                            b.mar++;
                            break;
                        case 4:
                            b.apr++;
                            break;
                        case 5:
                            b.may++;
                            break;
                        case 6:
                            b.jun++;
                            break;
                        case 7:
                            b.jul++;
                            break;
                        case 8:
                            b.aug++;
                            break;
                        case 9:
                            b.sep++;
                            break;
                        case 10:
                            b.oct++;
                            break;
                        case 11:
                            b.nov++;
                            break;
                        case 12:
                            b.dec++;
                            break;


                    }



                }
            }
            for (int i = 1; i <= 12; i++)
            {
                var data1 = db.Student.Where(c => c.Gender == "male" && c.DOB.Month == i).ToList();
                foreach (var item in data1)
                {
                    b.month2 = item.DOB.Month;

                    switch (b.month2)
                    {
                        case 1:
                            b.January++;
                            break;
                        case 2:
                            b.February++;
                            break;
                        case 3:
                            b.March++;
                            break;
                        case 4:
                            b.April++;
                            break;
                        case 5:
                            b.May++;
                            break;
                        case 6:
                            b.June++;
                            break;
                        case 7:
                            b.July++;
                            break;
                        case 8:
                            b.August++;
                            break;
                        case 9:
                            b.September++;
                            break;
                        case 10:
                            b.October++;
                            break;
                        case 11:
                            b.November++;
                            break;
                        case 12:
                            b.December++;
                            break;


                    }



                }
            }
            return b;

        }
    }

我的控制器

public ActionResult Barchart(Studentinfo s)
    {
        var data = ier.Barchart1(s);
        ViewBag.m = data.Male;
        ViewBag.f = data.Female;
        var data2 = ier.Barchart2();


        ViewBag.jan = data2.jan;
        ViewBag.feb = data2.feb;
        ViewBag.mar = data2.mar;
        ViewBag.apr = data2.apr;
        ViewBag.may = data2.may;
        ViewBag.jun = data2.jun;
        ViewBag.jul = data2.jul;
        ViewBag.aug = data2.aug;
        ViewBag.sep = data2.sep;
        ViewBag.oct = data2.oct;
        ViewBag.nov = data2.nov;
        ViewBag.dec = data2.dec;
        ViewBag.January = data2.January;
        ViewBag.February = data2.February;
        ViewBag.March = data2.March;
        ViewBag.April = data2.April;
        ViewBag.May = data2.May;
        ViewBag.June = data2.June;
        ViewBag.July = data2.July;
        ViewBag.August = data2.August;
        ViewBag.September = data2.September;
        ViewBag.October = data2.October;
        ViewBag.November = data2.November;
        ViewBag.December = data2.December;

        return View();


    }

Answer 1

使用开源Chart.js，您可以这样做：

模型例如：

public class BarChartModel
{
    public string Name { get; set; }
    public string Gender { get; set; }
    public DateTime Dob { get; set; }
}

您只需要按正确的顺序计数

 public class BarChartViewModel
    {
        public BarChartViewModel()
        {
            Male = new List<int>();
            Female = new List<int>();
        }
        public ICollection<int> Male { get; set; }
        public ICollection<int> Female { get; set; }
    }

在控制器中：

BarChartViewModel model = new BarChartViewModel();

// Here you can your db.Student to populate it
ICollection<BarChartModel> source = GetData();

for (int i = 1; i < 7; i++)
{
    int dataItemMale = source.Where(s => s.Gender == "Male" && s.Dob.Month == i).Count();
    model.Male.Add(dataItemMale);

    int dataItemFemale = source.Where(s => s.Gender == "Female" && s.Dob.Month == i).Count();
    model.Female.Add(dataItemFemale);
}

// You don't need other information than numbers in the right order 
//Single Responsability Principle
return View(model);

在视图中：您会看到月份名称是标签的责任。

<div class="ibox-content">
    <div>
        <canvas id="barChart" height="140"></canvas>
    </div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="~/Chart.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        // This will transform your model in javascript object.
        var jsObject = @Html.Raw(Json.Encode(Model));

        if (jsObject) {

            var male = jsObject.Male;
            var female = jsObject.Female;

            var barData = {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [
                    {
                        label: "Male",
                        backgroundColor: 'rgba(220, 220, 220, 0.5)',
                        pointBorderColor: "#fff",
                        data: male
                    },
                    {
                        label: "Female",
                        backgroundColor: 'rgba(26,179,148,0.5)',
                        borderColor: "rgba(26,179,148,0.7)",
                        pointBackgroundColor: "rgba(26,179,148,1)",
                        pointBorderColor: "#fff",
                        data: female
                    }
                ]
            };

            var barOptions = {
                responsive: true
            };


            var ctx2 = document.getElementById("barChart").getContext("2d");
            new Chart(ctx2, { type: 'bar', data: barData, options: barOptions });
        }
        });
</script>

我希望它有所帮助。