如何将数据绑定到线图在MVC3 highcharts? [英] How to bind data to line chart in highcharts in MVC3?
问题描述
大家好,我有其中的StoredProcedure在那里我得到的输出数据是这样
VAR loggedbugs
PROJECTNAME ProjectYear ProjectMonth Week1 Week2译员更加Week4 Week5
电子商务2012 8 0 1 4 3 0
VAR loggedbugs
PROJECTNAME ProjectYear ProjectMonth Week1 Week2译员更加Week4 Week5
电子商务2012 8 2 2 8 3 0
和我称之为StoredProcedure的在我的MVC应用程序,并返回该数据为JSON像这样
公众的ActionResult指数()
{
返回查看();
}
公共JsonResult CreatedBugs()
{
INT年;
INT月;
INT专案编号;
年= 2012;
一个月= 8;
专案编号= 16;
VAR loggedbugs = db.ExecuteStoreQuery< LoggedBugs>(LoggedBugs @年@月,@专案编号,新的SqlParameter(@年,年),新的SqlParameter(@月,月),新的SqlParameter(@专案编号专案编号))了ToList()。
VAR ClosedBugs = db.ExecuteStoreQuery< LoggedBugs>(ClosedBugs @年@月,@专案编号,新的SqlParameter(@年,年),新的SqlParameter(@月,月),新的SqlParameter(@专案编号专案编号))了ToList()。
VAR模型=新LoggedBugs
{
LoggedBugsCount = loggedbugs,
ClosedBugs = ClosedBugs
};
返回JSON(型号,JsonRequestBehavior.AllowGet);
}
模式返回我的记录数的双在这里......所以现在我想做的是......这数据应该绑定到折线图,其中LoggedBugsCount应该有不同的线路和ClosedBugs应该有不同的行...
和周应该是X轴和Y轴应该具有计数....
任何一个可以帮助我在这里如何highcharts..this此数据线图绑定是什么,我想现在,但没有结果。
<脚本类型=文/ JavaScript的>
$(文件)。就绪(函数(){
警报(1);
$ .getJSON('<%= Url.Action(CreatedBugs,WeeklyLoggedBugs)%>'{}功能(数据){
VAR JSON =数据;
警报(数据);
变种loggedbugs = [];
变种closedbugs = [];
为(以JSON变种I){
// VAR意甲=新的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]。数据= loggedbugs;
chart.series [1]。数据= closedbugs;
VAR图;
图=新Highcharts.Chart({
图:{
renderTo:容器,
类型:行
},
标题:{
文字:每日报告
},
字幕:{
文字:记录错误
},
X轴:{
类:['Week1','Week2','译员更加','Week4','Week5']
},
Y轴:{
标题:{
文本:温度(℃)'
}
},
提示:{
启用:假的,
格式:函数(){
回归'< B>' + this.series.name +'< / B>< BR />' +
this.x +:+ this.y +'°C';
}
},
plotOptions:{
行:{
dataLabels:{
启用:真
},
enableMouseTracking:假的
}
},
系列:[{
键入:'行',
名称:记录错误 },
{
键入:'行',
名称:'ClosedBugs }]
});
});
});
< / SCRIPT>
在这里看到
chart.series [0]。数据= loggedbugs;
chart.series [1]。数据= closedbugs;
VAR图;
图=新Highcharts.Chart({
........
});
首先,你正在创建图表,甚至定义图表变量之前将数据添加到系列。
第二,您可以使用串联组数据:
系列:[{
名称:'记录错误',
数据:loggedbugs},
{
名称:'ClosedBugs',
数据:closedbugs
}]
所以,你的事件不需要
chart.series [0]。数据= loggedbugs;
chart.series [1]。数据= closedbugs;
下面是例子: http://jsfiddle.net/mhardik/JRq7Z/
编辑:
我不知道asp.net MVC3
检查您是否获取数据。使用控制台打印响应的console.log()
如果您正在使用FF。
为(VAR我的json){
loggedbugs.push([JSON [I] .LoggedBugsCount]);
closedbugs.push([JSON [I] .ClosedBugs]); }
//检查
的console.log(loggedbugs);的console.log(closedbugs);
Hi all i have storedprocedure which where i get the output data like this
var loggedbugs
projectName ProjectYear ProjectMonth Week1 Week2 Week3 Week4 Week5
Ecommerce 2012 8 0 1 4 3 0
var loggedbugs
projectName ProjectYear ProjectMonth Week1 Week2 Week3 Week4 Week5
Ecommerce 2012 8 2 2 8 3 0
and i call this storedprocedure in my MVC application and return this data as Json like this
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);
}
model return me record count two here...so now what i want to do is ...this data should be binded to linechart where LoggedBugsCount should have a different line and ClosedBugs should have a different line... and weeks should be on Xaxis and y axis should have the count....
can any one help me here in how to bind this data line chart in highcharts..this is what i am trying for now but there is no result
<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>
See here
chart.series[0].data = loggedbugs;
chart.series[1].data = closedbugs;
var chart;
chart = new Highcharts.Chart({
........
});
First, You are adding data to series before creating Chart and even defining chart variable.
Second, You can set data in series using:
series: [{
name: 'Logged Bugs',
data: loggedbugs
},
{
name: 'ClosedBugs',
data: closedbugs
}]
So, You event don't need
chart.series[0].data = loggedbugs;
chart.series[1].data = closedbugs;
Here is the example: http://jsfiddle.net/mhardik/JRq7Z/
EDIT: I dont know asp.net MVC3
Check whether you are getting data. Print response in console using console.log()
if you are using FF.
for (var i in json) {
loggedbugs.push([json[i].LoggedBugsCount]);
closedbugs.push([json[i].ClosedBugs]);
}
// Check
console.log(loggedbugs); console.log(closedbugs);
这篇关于如何将数据绑定到线图在MVC3 highcharts?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!