如何在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)"
            }]
        },            
    });
}

這是我的靜態圖表sketch =>

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

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>