Chart.js - 使用 sql server 和 asp.net mvc5 从数据库中获取数据

Question

我显示并设置了chart.js 的样式，并且还在数组中使用模拟数据，我只是不知道如何使用MVC 5 填充chart.js 中的数据。我尝试了很多不同的方法，它显示数据但不显示图表。理想情况下，我需要两个数据集；一份用于每周费用，一份用于每月费用。以下是我尝试过的方法。如果有人能建议我做错了什么或只是指出我正确的方向，将不胜感激。

谢谢。

图表控制器

public JsonResult WeeklyExpenseSummary()
    {
        System.Web.UI.DataVisualization.Charting.Chart chart = new System.Web.UI.DataVisualization.Charting.Chart();

        DateTime d = DateTime.Today;

        var offset = d.DayOfWeek - System.DayOfWeek.Monday;
        offset = (offset < 0) ? 6 : offset;

        DateTime FromDate = d.AddDays(-offset);
        DateTime ToDate = FromDate.AddDays(7);

        var data = (from a in ExpenseReport
                    join at in Amount on a.ItemName equals at.Amount
                    where a.Date >= FromDate
                          && a.Date < ToDate
                    group at by at.ItemName into g
                    select new
                    {
                        value = g.Count(),
                        label = g.Key
                    }).ToList();

        return Json(JsonConvert.SerializeObject(chart.barChart(data)), JsonRequestBehavior.AllowGet);
    }
 public JsonResult MonthlyExpenseSummary()
    {
        System.Web.UI.DataVisualization.Charting.Chart chart = new System.Web.UI.DataVisualization.Charting.Chart();

        DateTime today = DateTime.Today;

        DateTime startDate = new DateTime(today.Year, today.Month, 1);
        DateTime endDate = new DateTime(today.Year, today.Month, DateTime.DaysInMonth(today.Year, today.Month));

        var data = (from a in ExpenseReport
                    join at in Amount on a.itemName equals at.Amount
                    where a.Date >= FromDate
                          && a.Date < ToDate
                    group at by at.ItemName into g
                    select new
                    {
                        value = g.Count(),
                        label = g.Key
                    }).ToList();

        return Json(JsonConvert.SerializeObject(chart.barChart(data)), JsonRequestBehavior.AllowGet);
    }

Index.cshtml

<div style="width: 80%;">
        <canvas id="barChart" heigh="400" width="400"></canvas>
    </div>
    <script>

        var chart = document.getElementById("barChart").getContext('2d');
        Chart.defaults.global.animation.duration = 2000;
        var barChart = new Chart(chart,
            {
                type: 'bar',
                data: {
                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    datasets: [{
                            label: 'Weekly Expenses',
                            fill: true,
                            barTension: 0.1,
                            borderColor: '#2C3E50',  
                            borderWidth: 2,
                            borderCapStyle: 'butt',
                            borderDash: [],
                            borderDashOffset: 0.0,
                            borderJoinStyle: 'miter',
                            pointBorderColor: "#2C3E50",
                            pointBackgroundColor: "#fff",
                            pointBorderWidth: 2,
                            pointHoverRadius: 8,
                            pointHoverBackgroundColor: "#2C3E50",
                            pointHoverBorderColor: "#2C3E50",
                            pointHoverBorderWidth: 5,
                            pointRadius: 10,
                            PointHitRadius:10,
                            data: [20,30,40,50,60,70,80,90,100,120,140,50]
                    },
                        {
                            label: 'Monthly Expenses',
                            fill: true,
                            barTension: 0.8,
                            backgroundColor: '#2C3E50',
                            borderColor: '#f0c419',  
                            borderWidth: 2,
                            borderCapStyle: 'butt',
                            borderDash: [],
                            borderDashOffset: 0.0,
                            borderJoinStyle: 'miter',
                            pointBorderColor: "#f0c419",
                            pointBackgroundColor: "#fff",
                            pointBorderWidth: 1,
                            pointHoverRadius: 5,
                            pointHoverBackgroundColor: "#f0c419",
                            pointHoverBorderColor: "#f0c419",
                            pointHoverBorderWidth: 2,
                            pointRadius: 1,
                            PointHitRadius:1,
                            data: /*[10,20,30,40,50,60,70,80,90,100,110,120]*/ data
                        }
                    ]
                },
                options: {
                    scales: {
                        yAxes: [
                            {
                                ticks: {
                                    beginAtZero: true,
                                },
                            }]
                    }
                }

            });
    </script>

Answer 1

几个月前，当我在做一个项目的时候，我是这样做的。我们在网站上有一个日历。当日期更改时，我们使用 ajax 刷新图表。

首先，使用 ViewModel，然后在 Index.cshtml 上使用 Model 渲染局部视图。 其次，发送ajax请求从服务中获取数据。 OnSuccess 方法用数据填充 div 的 id。

在您的控制器上返回带有模型的 PartialView。

在您的局部视图上，创建空数组来存储数据。 然后从模型填充数组 然后在图表上使用它。

试试这个。

Index.cshtml代码

@model ProjectName.Models.MyViewModel

<div id="DataZone">
   @{
        Html.RenderPartial("your_partialview",Model);
     }
</div>



 <script>
   ..
       $.ajax({
                    url: "request_url",
                    method: "post",
                    data: {
                        param1: yourval,
                        param2: yourval2
                    },
                    success: function (data) {
                       $("#dataZone").html(data);
                    },
                    error: function(data) {
                       console.log(data);
                    }
                });
    });
    <script>

前控制器代码

    [HttpPost]
        public ActionResult GetData(DateTime param1,DateTime param2)
        {
            ExampleService es= new ExampleService ();
            ExampleViewModel evm = new ExampleViewModel ();
           evm.ListForChart = es.GetWeekly(param1,param2);
           evm.ListForChart2 = es.GetMothly(param1,param2);
..
return PartialView("your_partialviewname", evm);
}

ExampleViewModel 的前代码

   public class MarketViewModel
        {
            public List<YourModel> ListForChart { get; set; }
            public List<YourModel> ListForChart2 { get; get;}
    }

example Service from your code:
public class YourService{
 private List<YourModel> exampleList;
 public YourService(){
  exampleList = new List<YourModel>();
}

 public List<YourModel> GetWeekly(param1, param2)
   // data is List of your model. return this.
   var data = (from a in ExpenseReport
                    join at in Amount on a.ItemName equals at.Amount
                    where a.Date >= FromDate
                          && a.Date < ToDate
                    group at by at.ItemName into g
                    select new
                    {
                        value = g.Count(),
                        label = g.Key
                    }).ToList();

return data;

}
}

PartialView 示例代码

<div id="chart-gonna-be-here"></div>

<script type="text/javascript">
  $(document).ready(function() {
        CreateChart();
}

CreateChart = function(){
  var data= []; // You will fill data from Model.
 @foreach (var item in Model.ListForChart.OrderBy(c => c.Date))
        {
            @:data.push(@item.YourModelObj.ToString();
        }
}

// 然后创建图表

      var chart = document.getElementById("barChart").getContext('2d');
        Chart.defaults.global.animation.duration = 2000;
        var barChart = new Chart(chart,
            {
                type: 'bar',
                data: {
                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    datasets: [{
                            label: 'Weekly Expenses',
                            fill: true,
                            barTension: 0.1,
                            borderColor: '#2C3E50',  
                            borderWidth: 2,
                            borderCapStyle: 'butt',
                            borderDash: [],
                            borderDashOffset: 0.0,
                            borderJoinStyle: 'miter',
                            pointBorderColor: "#2C3E50",
                            pointBackgroundColor: "#fff",
                            pointBorderWidth: 2,
                            pointHoverRadius: 8,
                            pointHoverBackgroundColor: "#2C3E50",
                            pointHoverBorderColor: "#2C3E50",
                            pointHoverBorderWidth: 5,
                            pointRadius: 10,
                            PointHitRadius:10,
                            data: [20,30,40,50,60,70,80,90,100,120,140,50]
                    },
                        {
                            label: 'Monthly Expenses',
                            fill: true,
                            barTension: 0.8,
                            backgroundColor: '#2C3E50',
                            borderColor: '#f0c419',  
                            borderWidth: 2,
                            borderCapStyle: 'butt',
                            borderDash: [],
                            borderDashOffset: 0.0,
                            borderJoinStyle: 'miter',
                            pointBorderColor: "#f0c419",
                            pointBackgroundColor: "#fff",
                            pointBorderWidth: 1,
                            pointHoverRadius: 5,
                            pointHoverBackgroundColor: "#f0c419",
                            pointHoverBorderColor: "#f0c419",
                            pointHoverBorderWidth: 2,
                            pointRadius: 1,
                            PointHitRadius:1,
                            data: /**/ data <<--- data will be here
                        }
                    ]
                },
                options: {
                    scales: {
                        yAxes: [
                            {
                                ticks: {
                                    beginAtZero: true,
                                },
                            }]
                    }
                }

            });
</script>