Chart.js - 使用 sql 服务器和 asp.net mvc5 从数据库获取数据
Chart.js - Getting data from database using sql server and asp.net mvc5
我展示了 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>
几个月前，我在做项目的时候，就是这样干的。我们在网站上有一个日历。当日期更改时，我们使用 ajax.
刷新图表
首先，使用 ViewModel，然后在 Index.cshtml 上使用模型渲染部分视图。
其次，发送ajax请求从服务中获取数据。
OnSuccess 方法用数据填充 div 的 id。
在您的控制器上 return 带有模型的 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>
ex 控制器代码
[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>
我展示了 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>
几个月前，我在做项目的时候，就是这样干的。我们在网站上有一个日历。当日期更改时，我们使用 ajax.
刷新图表首先，使用 ViewModel，然后在 Index.cshtml 上使用模型渲染部分视图。 其次，发送ajax请求从服务中获取数据。 OnSuccess 方法用数据填充 div 的 id。
在您的控制器上 return 带有模型的 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>
ex 控制器代码
[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>