如何将数据绑定到线图在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＆LT; LoggedBugs＆GT;（LoggedBugs @年@月，@专案编号，新的SqlParameter（@年，年），新的SqlParameter（@月，月），新的SqlParameter（@专案编号专案编号））了ToList（）。
VAR ClosedBugs = db.ExecuteStoreQuery＆LT; LoggedBugs＆GT;（ClosedBugs @年@月，@专案编号，新的SqlParameter（@年，年），新的SqlParameter（@月，月），新的SqlParameter（@专案编号专案编号））了ToList（）。
VAR模型=新LoggedBugs
{
LoggedBugsCount = loggedbugs，
ClosedBugs = ClosedBugs
};
返回JSON（型号，JsonRequestBehavior.AllowGet）;
}
模式返回我的记录数的双在这里......所以现在我想做的是......这数据应该绑定到折线图，其中LoggedBugsCount应该有不同的线路和ClosedBugs应该有不同的行...
和周应该是X轴和Y轴应该具有计数....
任何一个可以帮助我在这里如何highcharts..this此数据线图绑定是什么，我想现在，但没有结果。
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
警报（1）;
$ .getJSON（'＆LT;％= Url.Action（CreatedBugs，WeeklyLoggedBugs）％＆GT;'{}功能（数据）{
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轴：{
标题：{
文本：温度（℃）'
}
}，
提示：{
启用：假的，
格式：函数（）{
回归'＆LT; B＆GT;' + this.series.name +'＆LT; / B＆GT;＆LT; BR /＆GT;' +
this.x +：+ this.y +'°C';
}
}，
plotOptions：{
行：{
dataLabels：{
启用：真
}，
enableMouseTracking：假的
}
}，
系列：[{
键入：'行'，
名称：记录错误 }，
{
键入：'行'，
名称：'ClosedBugs }]
}）;
}）;
}）;
＆LT; / SCRIPT＆GT;
在这里看到
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屋！
