如何将数据从controller绑定到chartjs折线图,以创建动态折线图
How to bind data from Controler to chartjs line chart to create it as dynamic?
我使用chart.js从数据中创建图表,我在我的控制器中使用linq查询并返回这些值作为json,但到目前为止,我已经尝试过了,并没有得到json的这些值,这是我迄今为止尝试过的:-
这是我的控制器:-
[HttpPost]
public JsonResult MonthlyTurnover(string info)
{
var list = (from c in NMSDC.DataSends
where c.UserID == Session["UserID"].ToString() && c.RCommission != null && c.DT.Month == DateTime.Now.Month
group c by new { c.UserID, c.DT.Date } into g1
orderby g1.Key.Date descending
select new MonthlyTurnoverChart
{
Amount = g1.Sum(item => item.value),
NoOfTransaction = (int)g1.Count(),
//Date = g1.Key.Date.ToShortDateString()
}).ToList();
return Json(list, JsonRequestBehavior.AllowGet);
}
、View和My Javascript如下:-
<div class="col-md-6" style="margin-left: 2em;">
<!-- Line CHART -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Monthly Turnover</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="box-body">
<div class="chart">
<canvas id="lineChart" height="200" width="200"></canvas>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
现在我写的Javascript:-
$(function() {
var path = window.location.href;
if (path == "http://localhost:55261/Retailer") {
var info = $("#lbllogininfo").val();
alert(info);
$.ajax({
type: "POST",
url: '/Retailer/MonthlyTurnover',
data: JSON.stringify({
info: info
}),
dataType: 'json',
contentType: 'application/json',
success: function(list) { << < ---------------The Problem Is Here
I am Getting Values as
[[object][Object], [object][Object], [object][Object], [object][Object]] ------ >>
alert("all data recivcd :" + list);
var alldata = $.each(list, function(data) {
alldata = "'" + data.Amount + "'";
});
var lbl = alldata[0];
var dataset1 = alldata[1];
var dataset2 = alldata[2];
var cdata = {
labels: lbl,
datasets: [{
label: "My First Dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: dataset1
}, {
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: dataset2
}]
};
alert("AllData: " + alldata);
alert("Chart Data: " + list);
Chart.defaults.global.responsive = true;
var ctx = $("#lineChart").get(0).getContext('2d');
var linechart = new Chart(ctx).Line(cdata, {
bezierCurve: false
});
},
error: function(data) {
alert("Chart Error: " + data);
}
});
}
});
,模型如下:
public class MonthlyTurnoverChart
{
public decimal Amount { get; set; }
public Nullable<int> NoOfTransaction { get; set; }
public string Date { get; set; }
}
你必须使用某种for循环。
请注意,属性的情况可能会有所不同,这是由于Json序列化器的设置
var dataset1 = new array();
var dataset2 = new array();
for (var i = 0; i < list.length; i++) {
dataset1.push(list[i].Amount);
dataset2.push(list[i].NoOfTransaction);
}
dataset1
现在是:
[Amount1, Amount2, Amount3, Amount4, Amount5]
dataset2
现在是:
[NoOfTransaction1, NoOfTransaction2, NoOfTransaction3, NoOfTransaction4, NoOfTransaction5]
相关文章:
- 用与线条相同的颜色填充多折线图上的点
- 跟踪jqplot垂直折线图的鼠标位置
- Morris.js折线图x轴标签在调整大小后消失
- Chart.js V2折线图缺点
- 将直流图表库中的折线图缩放限制为小时
- 如何用d3.js绘制折线图
- 部分填充区域的折线图
- 将时间缩放添加到折线图(Chart.js)
- Chart.js折线图的0线型
- d3绘制动画折线图的基本示例
- Javascript FLOT组合条形图;以x轴为字符串的折线图
- 如何在折线图中显示最近的值
- charts js更改折线图轴的字体大小/颜色和背景线
- 从特定系列的谷歌可视化折线图中删除悬停工具提示
- 隐藏 ChartJS 折线图中的点
- chartjs显示悬停在折线图上的点
- 有没有一种方法可以动态地将带有标签的多行插入ChartJS折线图中
- Chartjs示例折线图设置没有't显示数据标签
- 如何将数据从controller绑定到chartjs折线图,以创建动态折线图
- 如何在折线图的Chartjs中根据用户输入动态改变Y轴值