您的位置:首页 > 编程语言 > ASP

ASP.NET Highcharts图表

2015-11-11 10:16 477 查看
js 图表代码,如下:

charts[i] = new Highcharts.Chart({
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
},
renderTo: 'container' + i,
type: 'spline'
},
title: {
text: "实时数据监测"
},
xAxis: {
title: {
text: '采集时间'
},
type: 'datetime',
tickPixelInterval: 120

},
yAxis: {
title: {
text: '数据值'
}
},
tooltip: {
enabled: true,
formatter: function () {
return '<b>' + this.series.name + '</b><br/>'
+ Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x)
+ '<br/>' + Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: true,
layout: 'vertical',
backgroundColor: '#FFFFFF',
floating: true,
align: 'left',
x: 100,
verticalAlign: 'top',
y: 70
},
exporting: {
enabled: false,
url: "highcharts_export.aspx"
},
series: [
{
name: $("#container" + i).attr("name"),
data: []
}
]
});


js图表载入点数据,代码如下:

var measureIDID = $("#container" + i).attr("mydefineid");
$.ajax({
type: "post",
url: "../frm/realTimeChart.aspx/GetRealTimeChart",
data: "{'id':'" + measureIDID + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (data) {
var datainfo = [];
if (data.d != "") {
datainfo = eval('(' + data.d + ')');
}
if (datainfo.length > 0) {
for (var j in datainfo) {
var r = datainfo[j];
charts[i].series[0].addPoint(r, true, false);
}
}
},
error: function (err) {
alert("错误代码:" + err.status);
}
});


ASP.NET后台代码,如下:

[WebMethod]
public static string GetRealTimeChart(string id)
{
string userID = HttpContext.Current.Session["userID"].ToString();
List<drWater.Models.info> infoList = (List<drWater.Models.info>)drWater.BLL.infoManager.GetRealTimeView(userID, id, "20");
if (infoList != null)
{
if (infoList.Count > 0)
{
return ToJson(infoList);
}
}
return "";
}
private static string ToJson(List<drWater.Models.info> infoList)
{
System.Web.Script.Serialization.JavaScriptSerializer javaScriptSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
javaScriptSerializer.MaxJsonLength = Int32.MaxValue; //取得最大数值
System.Collections.ArrayList arrayList = new System.Collections.ArrayList();
for (int i = 0; i < infoList.Count; i++)
{
System.Collections.ArrayList arrayItem = new System.Collections.ArrayList();
arrayItem.Add(DateTimeToUTC(infoList[i].UpdateTime));
arrayItem.Add(infoList[i].Val);
arrayList.Add(arrayItem);
}
return javaScriptSerializer.Serialize(arrayList);  //返回一个json字符串
}
private static double DateTimeToUTC(System.DateTime time)
{
double intResult = 0;
System.DateTime startTime = TimeZone.CurrentTimeZone.ToLocalTime(new System.DateTime(1970, 1, 1));
intResult = (time - startTime).TotalMilliseconds;
return intResult;
}


ASP.NET后台经过转化为UTC时间,经过多次尝试,虽然返回的json字符串格式符合Highcharts的数据格式,但是出现的曲线有缺陷!

使用addPoint方法,挨个添加点数据之后,解决!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: