ASP.NET Highcharts图表
2015-11-11 10:16
477 查看
js 图表代码,如下:
js图表载入点数据,代码如下:
ASP.NET后台代码,如下:
ASP.NET后台经过转化为UTC时间,经过多次尝试,虽然返回的json字符串格式符合Highcharts的数据格式,但是出现的曲线有缺陷!
使用addPoint方法,挨个添加点数据之后,解决!
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方法,挨个添加点数据之后,解决!
相关文章推荐
- ASP.NET 小白从零开始建站简易教程 (一)域名、虚拟主机、FTP上传文件
- ASP.NET easyUI--datagrid 通过ajax请求ASP.NET后台数据的分页查询
- asp.net 信息管理系统中的需填写数据的键值对获取方法
- asp.net多线程,执行真实时间与百分比的进度条
- asp.net mvc4三层架构搭建
- asp.net web 自定义控件
- 【Asphyre引擎】今天终于把精灵demo基本改好了。
- 【Asphyre引擎】关于AsphyreTypes中OverlapRect的改动,都是泪啊!!!
- asp.net mvc 链接到其他area地址
- ASP.NET页面间传值总结
- ASP.NET 5
- asp.net MVC: PagedList + View Model
- ASP.NET vNext or .NET vNext?
- 详解 ASP.NET异步
- 利用JasperReport+iReport进行Web报表开发
- Struts2整合JasperReport
- Asp.net或C#使用word模板生成替换后的Word和pdf文档-总结
- Dnsmasp详解
- JasperReport学习笔记8-JasperReport和Hibernate,Struts的整合
- JasperReport学习笔记7-导出成其它格式(pdf,xls,html)