如何將數據庫數據綁定到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> 

我希望它有幫助。