Asp.net mvc 3 如何在MVC3中将数据绑定到highcharts中的折线图?
大家好,我有storedprocedure,在这里我可以得到这样的输出数据Asp.net mvc 3 如何在MVC3中将数据绑定到highcharts中的折线图?,asp.net-mvc-3,highcharts,linechart,Asp.net Mvc 3,Highcharts,Linechart,大家好,我有storedprocedure,在这里我可以得到这样的输出数据 public ActionResult Index() { return View(); } public JsonResult CreatedBugs() { int year; int month; int projectid; year = 2012; month = 8;
public ActionResult Index()
{
return View();
}
public JsonResult CreatedBugs()
{
int year;
int month;
int projectid;
year = 2012;
month = 8;
projectid = 16;
var loggedbugs = db.ExecuteStoreQuery<LoggedBugs>("LoggedBugs @Year,@Month,@ProjectID", new SqlParameter("@Year", year), new SqlParameter("@Month", month), new SqlParameter("@ProjectID", projectid)).ToList();
var ClosedBugs = db.ExecuteStoreQuery<LoggedBugs>("ClosedBugs @Year,@Month,@ProjectID", new SqlParameter("@Year", year), new SqlParameter("@Month", month), new SqlParameter("@ProjectID", projectid)).ToList();
var model = new LoggedBugs
{
LoggedBugsCount = loggedbugs,
ClosedBugs = ClosedBugs
};
return Json(model, JsonRequestBehavior.AllowGet);
}
var loggedbugs
projectName ProjectYear ProjectMonth Week1 Week2 Week3 Week4 Week5
Ecommerce 2012 8 0 1 4 3 0
projectName ProjectYear ProjectMonth Week1 Week2 Week3 Week4 Week5
Ecommerce 2012 8 2 2 8 3 0
var loggedbugs
projectName ProjectYear ProjectMonth Week1 Week2 Week3 Week4 Week5
Ecommerce 2012 8 0 1 4 3 0
projectName ProjectYear ProjectMonth Week1 Week2 Week3 Week4 Week5
Ecommerce 2012 8 2 2 8 3 0
我在MVC应用程序中调用这个storedprocedure,并以Json的形式返回这些数据,如下所示
public ActionResult Index()
{
return View();
}
public JsonResult CreatedBugs()
{
int year;
int month;
int projectid;
year = 2012;
month = 8;
projectid = 16;
var loggedbugs = db.ExecuteStoreQuery<LoggedBugs>("LoggedBugs @Year,@Month,@ProjectID", new SqlParameter("@Year", year), new SqlParameter("@Month", month), new SqlParameter("@ProjectID", projectid)).ToList();
var ClosedBugs = db.ExecuteStoreQuery<LoggedBugs>("ClosedBugs @Year,@Month,@ProjectID", new SqlParameter("@Year", year), new SqlParameter("@Month", month), new SqlParameter("@ProjectID", projectid)).ToList();
var model = new LoggedBugs
{
LoggedBugsCount = loggedbugs,
ClosedBugs = ClosedBugs
};
return Json(model, JsonRequestBehavior.AllowGet);
}
public ActionResult Index()
{
返回视图();
}
public JsonResult CreatedBugs()
{
国际年;
整月;
整数投影;
年份=2012年;
月=8;
d=16;
var loggedbugs=db.ExecuteStoreQuery(“loggedbugs@Year,@Month,@projectd”,new-SqlParameter(@Year,Year),new-SqlParameter(@Month,Month),new-SqlParameter(@projectd,projectd)).ToList();
var ClosedBugs=db.ExecuteStoreQuery(“ClosedBugs@Year,@Month,@projectd”,new-SqlParameter(“@Year,”,Year),new-SqlParameter(“@Month”,Month),new-SqlParameter(@projectd,projectd)).ToList();
var模型=新的LoggedBugs
{
LoggedBugsCount=loggedbugs,
ClosedBugs=ClosedBugs
};
返回Json(model,JsonRequestBehavior.AllowGet);
}
模型返回我这里的记录计数2…所以现在我想做的是…这个数据应该绑定到折线图,其中LoggedBugsCount应该有一条不同的线,ClosedBugs应该有一条不同的线。。。
周应该在X轴上,y轴应该有计数
有谁能帮我把这个数据线图绑定到highcharts中吗?这是我现在正在尝试的,但是没有结果
<script type="text/javascript">
$(document).ready(function () {
alert(1);
$.getJSON('<%= Url.Action("CreatedBugs","WeeklyLoggedBugs") %>', {}, function (data) {
var json = data;
alert(data);
var loggedbugs = [];
var closedbugs = [];
for (var i in json) {
// var serie = new Array(json[i].Projects, json[i].Bugs);
//jsondata.push([json[i].projectName, json[i].ProjectYear, json[i].ProjectMonth, json[i].Week1, json[i].Week2, json[i].Week3, json[i].Week4, json[i].Week5]);
loggedbugs.push([json[i].LoggedBugsCount]);
closedbugs.push([json[i].ClosedBugs]);
}
chart.series[0].data = loggedbugs;
chart.series[1].data = closedbugs;
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Daily Reports'
},
subtitle: {
text: 'Logged Bugs'
},
xAxis: {
categories: ['Week1', 'Week2', 'Week3', 'Week4', 'Week5']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
tooltip: {
enabled: false,
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y + '°C';
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
type: 'line',
name: 'Logged Bugs'
},
{
type: 'line',
name: 'ClosedBugs'
}]
});
});
});
</script>
$(文档).ready(函数(){
警报(1);
$.getJSON(“”,{},函数(数据){
var json=数据;
警报(数据);
var loggedbugs=[];
var closedbugs=[];
for(json中的var i){
//var serie=newarray(json[i].Projects,json[i].bug);
//推送([json[i].projectName,json[i].ProjectYear,json[i].ProjectMonth,json[i].Week1,json[i].Week2,json[i].Week3,json[i].Week4,json[i].Week5]);
loggedbugs.push([json[i].loggedbugscont]);
push([json[i].closedbugs]);
}
chart.series[0]。数据=loggedbugs;
chart.series[1]。数据=closedbugs;
var图;
图表=新的高点图表。图表({
图表:{
renderTo:'容器',
类型:“行”
},
标题:{
正文:“每日报告”
},
副标题:{
文本:“记录的错误”
},
xAxis:{
类别:['Week1','Week2','Week3','Week4','Week5']
},
亚克斯:{
标题:{
文字:“温度(°C)”
}
},
工具提示:{
启用:false,
格式化程序:函数(){
返回“+this.series.name+”
+
这个.x+':'+这个.y+'°C';
}
},
打印选项:{
行:{
数据标签:{
已启用:true
},
enableMouseTracking:false
}
},
系列:[{
键入:“行”,
名称:“记录的错误”
},
{
键入:“行”,
名称:“ClosedBugs”
}]
});
});
});
参见此处
chart.series[0].data = loggedbugs;
chart.series[1].data = closedbugs;
var chart;
chart = new Highcharts.Chart({
........
});
首先,在创建图表甚至定义图表变量之前,要向序列中添加数据
其次,您可以使用以下方法设置系列数据:
series: [{
name: 'Logged Bugs',
data: loggedbugs
},
{
name: 'ClosedBugs',
data: closedbugs
}]
所以,你不需要
chart.series[0].data = loggedbugs;
chart.series[1].data = closedbugs;
以下是一个例子:
编辑:
我不知道asp.NETMVC3
检查您是否正在获取数据。如果您使用FF,请使用console.log()
在控制台中打印响应
for (var i in json) {
loggedbugs.push([json[i].LoggedBugsCount]);
closedbugs.push([json[i].ClosedBugs]);
}
// Check
console.log(loggedbugs); console.log(closedbugs);
你们盲目地模仿了这个例子。它仍然在y轴标题中显示“温度(°C)”。第二,你犯了什么错误?也许对样本数据进行修改()会更有帮助?@HardikMishra我在构建应用程序时在我的页面上找不到任何东西……是的,我必须更改那里的文本:下面的答案对你有帮助吗?那么我如何在var loggedbugs=[]中获取数据;var closedbugs=[];我需要将我的数据填充到此vars@Anil:以你在问题中提供的相同方式。我不知道asp.NETMVC3