如何在條形圖中使用mvc c＃中的ajax調用來綁定動態數據？

Question

我嘗試了顯示過去7天的條形圖。爲此，我使用條形圖和ASP.NET MVC和C＃。現在在這個頁面中，我已經添加了靜態條形圖顯示，現在我想要此圖表在設置日期的圖表X軸上創建動態。

這裏我下面的表中的數據顯示：

DateColumn | Count 
09-05-2017 10 
08-05-2017 05 
07-05-2017 20 
06-05-2017 4000 
05-05-2017 30 
04-05-2017 5000 
03-05-2017 40 

這是使用存儲過程在SQL Server中我的數據來自表。

這裏，這是我的html頁面代碼=>

<div class="box box-without-bottom-padding">    
     <canvas id="myChart"></canvas> 
    </div> 

這是我的腳本代碼=>

<script type="text/javascript"> 
    $(document).ready(function() {   
    $.ajax({ 
     url: 'Home/GetCount', 
     dataType: "json", 
     type: "GET", 
     contentType: 'application/json; charset=utf-8', 
     async: false, 
     processData: false, 
     cache: false, 
     delay: 15, 
     success: function (data) { 
      for (var i in data) { 
       // here come the data as object in the object 2 value 1 is datecolumn and 2 is total count. 

      } 
      AutoFollow(); 
     }, 
     error: function (xhr) { 
      alert('error'); 
     } 
    }); 
}); 


function AutoFollow() 
{ 
    var ctx = document.getElementById("myChart").getContext('2d'); 
    var myChart = new Chart(ctx, { 
     type: 'bar', 
     data: { 
      labels: ["M", "T", "W", "T", "F", "S", "S"], // here i want to show my date value 
      datasets: [{ 
       label: 'AutoFollow', 
       data: [12, 19, 3, 17, 28, 24, 7], // here show my total count date wise 
       backgroundColor: "rgba(153,255,51,1)" 
      }, { 
       label: 'Manual', 
       data: [30, 29, 5, 5, 20, 3, 10], 
       backgroundColor: "rgba(255,153,0,1)" 
      }] 
     },    
    }); 
} 

這是我的靜態圖素描=>

在上面顯示我的靜態圖表可以請任何人知道如何在圖表中設置我自己的數據。

Answer 1

實施例：

型號：

public class MyModel 
    { 
     public string DateColumn { get; set; } 
     public int Count { get; set; } 

     public static List<MyModel> GetList() 
     { 
      return new List<MyModel> 
      { 
       new MyModel {DateColumn = "09-05-2017",Count = 10}, 
       new MyModel {DateColumn = "10-05-2017",Count = 30}, 
       new MyModel {DateColumn = "11-05-2017",Count = 50}, 
       new MyModel {DateColumn = "12-05-2017",Count = 10}, 
       new MyModel {DateColumn = "13-05-2017",Count = 100}, 
       new MyModel {DateColumn = "14-05-2017",Count = 20}, 
       new MyModel {DateColumn = "15-05-2017",Count = 10}, 
       new MyModel {DateColumn = "16-05-2017",Count = 150}, 
       new MyModel {DateColumn = "17-05-2017",Count = 15}, 
       new MyModel {DateColumn = "18-05-2017",Count = 11}, 
       new MyModel {DateColumn = "19-05-2017",Count = 5}, 
      }; 
     } 
    } 

Clontoller：

public class HomeController : Controller 
    { 
     public JsonResult GetCount() 
     { 
      var model = MyModel.GetList();//Lode data from database 
      return Json(model, JsonRequestBehavior.AllowGet); 
     } 
    } 

視圖：

<div class="box box-without-bottom-padding">    
     <canvas id="myChart"></canvas> 
    </div> 

腳本：

<script type="text/javascript"> 
     $(function() { 
      var data = getData(); 
      AutoFollow(data); 
     }); 

     function getData() { 
      var dateValue = []; 
      var countValue = []; 
      $.ajax({ 
       url: "/home/GetCount/", 
       dataType: 'json', 
       async: false 
      }).done(function(data) { 
       data.forEach(function(obj) { 
        dateValue.push(obj.DateColumn); 
        countValue.push(obj.Count); 
       }); 
      }); 
      return { 
       dateValue: dateValue, 
       countValue: countValue 
      }; 
     } 


     function AutoFollow(data) { 
      var ctx = document.getElementById("myChart").getContext('2d'); 
      var myChart = new Chart(ctx, 
       { 
        type: 'bar', 
        data: { 
         labels: data.dateValue, // here i want to show my date value 
         datasets: [ 
          { 
           label: 'AutoFollow', 
           data: data.countValue, // here show my total count date wise 
           backgroundColor: "rgba(153,255,51,1)" 
          }, { 
           label: 'Manual', 
           data: [30, 29, 5, 5, 20, 3, 10], 
           backgroundColor: "rgba(255,153,0,1)" 
          } 
         ] 
        } 
       }); 
     } 
    </script> 

================================= ================================================== ================================================== ============

    -------------------------- 
        **As Per Your Request** 
       -------------------------- 

型號：

public class MyModel 
    { 
     public string DateColumn { get; set; } 
     public string Lable { get; set; } 
     public int Count { get; set; } 

     public static List<MyModel> GetList() 
     { 
      return new List<MyModel> 
      { 
       new MyModel {DateColumn = "09-05-2017",Count = 10,Lable = "Lable1"}, 
       new MyModel {DateColumn = "10-05-2017",Count = 30,Lable = "Lable1"}, 
       new MyModel {DateColumn = "11-05-2017",Count = 50,Lable = "Lable1"}, 
       new MyModel {DateColumn = "12-05-2017",Count = 10,Lable = "Lable1"}, 
       new MyModel {DateColumn = "13-05-2017",Count = 100,Lable = "Lable1"}, 
       new MyModel {DateColumn = "14-05-2017",Count = 20,Lable = "Lable2"}, 
       new MyModel {DateColumn = "15-05-2017",Count = 10,Lable = "Lable2"}, 
       new MyModel {DateColumn = "16-05-2017",Count = 150,Lable = "Lable2"}, 
       new MyModel {DateColumn = "17-05-2017",Count = 15,Lable = "Lable2"}, 
       new MyModel {DateColumn = "18-05-2017",Count = 11,Lable = "Lable2"}, 
       new MyModel {DateColumn = "19-05-2017",Count = 5,Lable = "Lable2"}, 
      }; 
     } 
    } 

操作：

public JsonResult GetCount() 
{ 
    var data = MyModel.GetList() 
     .GroupBy(s => s.Lable) 
     .Select(s => new 
     { 
      DateColumn = s.Select(d => d.DateColumn), 
      data = new 
      { 
       Lable = s.Key, 
       Count = s.Select(d => d.Count) 
      } 

     }); //Lode data from database 
    var model = new 
    { 
     DateColumn = data.First().DateColumn, 
     CountColumn = data.Select(s => s.data) 
    }; 
    return Json(model, JsonRequestBehavior.AllowGet); 
} 

腳本：

<script type="text/javascript"> 
     $(function() { 
      var data = getData(); 
      AutoFollow(data); 
     }); 

     function getData() { 
      var dateValue ; 
      var countValue; 
      $.ajax({ 
       url: "/Chart/GetCount/", 
       dataType: 'json', 
       async: false 
      }).done(function (data) { 
       dateValue = data.DateColumn; 
       countValue = data.valueColumn; 
      }); 
      return { 
       dateValue: dateValue, 
       countValue: countValue 
      }; 
     } 


     function AutoFollow(data) { 
      var ctx = document.getElementById("myChart").getContext('2d'); 
      var myChart = new Chart(ctx, 
       { 
        type: 'bar', 
        data: { 
         labels: data.dateValue, // here i want to show my date value 
         datasets: [ 
          { 
           label: data.countValue[0].Lable, 
           data: data.countValue[0].Count, // here show my total count date wise 
           backgroundColor: "rgba(153,255,51,1)" 
          }, { 
           label: data.countValue[1].Lable, 
           data: data.countValue[1].Count, 
           backgroundColor: "rgba(255,153,0,1)" 
          } 
         ] 
        } 
       }); 
     } 
</script>