如何在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页面代码=＆gt;

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

这是我的脚本代码=＆gt;

    <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 =＆gt;

在上面显示我的静态图表，任何人都知道如何在图表中设置我自己的数据。

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>