ASP.NET Highcharts图表
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, "); if (infoList != null) { ) { 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(); ; 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) { ; System.DateTime startTime = TimeZone.CurrentTimeZone.ToLocalTime(, , )); intResult = (time - startTime).TotalMilliseconds; return intResult; }
ASP.NET后台经过转化为UTC时间,经过多次尝试,虽然返回的json字符串格式符合Highcharts的数据格式,但是出现的曲线有缺陷!
使用addPoint方法,挨个添加点数据之后,解决!
ASP.NET Highcharts图表的更多相关文章
- 在asp.net中如何自己编写highcharts图表导出到自己的服务器上来
1.准备工作:网上下载highcharts导出的关键dll. 1).Svg.dll:因为highcharts的格式其实就是一个xml,采用svg的方式画图: 2).itextsha ...
- highcharts图表中级入门之xAxis label:X(横)坐标刻度值过长截断多行(换行)显示问题说明
在使用highcharts图表的过程中,总会碰到这样一个很是棘手的问题,横坐标刻度值太长,在不换行显示的情况下显得格外拥挤.虽然针对这一问题是可以对其刻度值进行旋转以此来避开显示拥挤问题[如何让hig ...
- 转:Highcharts图表控件的使用
摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...
- 关于Highcharts图表组件动态修改属性的方法(API)总结之Series
Highcharts图表组件内的Series很重要,如果说Categries是其大脑,那么Series就是其心脏.这两者才是Highcharts图表组件的重中之重啊.接下来就为大家介绍关于设置Seri ...
- highCharts图表应用-实现多种图表的显示
在数据统计和分析业务中,有时需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.highCharts可以轻 ...
- highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度
highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小 大] | ...
- HighCharts 图表高度动态调整
HighCharts 图表高度动态调整 前言 在使用HighCharts控件过程中,发现图表可以自适应div的高度,无法根据图表x.y轴的数量动态调整div高度,否则图标挤在一起,看起来非常不美观,也 ...
- jQuery HighchartsTableHTML表格转Highcharts图表插件
版权申明jQuery HighchartsTable 由 PMSIpilot 创建,中文使用文档由Highcharts中文网发布本文由Theo.红烧鸡翅膀.Mr.Zhang 翻译整理,版权归Highc ...
- 将Highcharts图表数据生成Table表格
有的时候,我们不仅仅需要漂亮的统计图来显示统计结果,还需要在统计图下方一个表格可以更加直观的展现各类数据.既然统计图都显示出来了,那我们可以根据统计图的各元素生成表格了. 首先,先显示统计图. Htm ...
随机推荐
- debug阶段工作期站立会议2(进度推进)
组名:天天向上 组长:王森 组员:张政.张金生.林莉.胡丽娜 代码地址:HTTPS:https://git.coding.net/jx8zjs/llk.git SSH:git@git.coding.n ...
- CSS3 2D Transform
在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和 ...
- what is php?
PHP is a popular general-purpose scripting language that is especially suited to web development. Fa ...
- selenium测试套件
1.测试套件测试套件,简单理解就是讲多个用例,装在一个容器里来同时执行完成. 2.测试套件分析 #coding=utf-8 import unittestimport BaiDuSearch,BaiD ...
- easy ui 问题
easyui 的样式 和Bootstrap css 有冲突,不要一起使用 日期禁止输入 editable="false" ------------------------- ...
- ubuntu 工作区中拖动一个窗体到另一个工作区就卡住回不到桌面了
ubuntu 工作区中拖动一个窗体到另一个工作区就卡住回不到桌面了 解决方法: 按 alt + 回车 键直接就返回去了
- 转:java.sql.SQLException: [Microsoft][ODBC 驱动程序管理器] 未发现数据源名称并且未指定默认驱动程序
在Win7 64位系统下,使用Java+Access数据库编程,用Java连数据库时,出现错误提示,如下: Java java.sql.SQLException: [Microsoft][ODBC 驱 ...
- 读书笔记——《图解TCP/IP》(3/4)
经典摘抄 第五章 IP协议相关技术 1.DNS可以将网址自动转换为具体的IP地址. 2.主机识别码的识别方式:为每台计算机赋以唯一的主机名,在进行网络通信时,可以直接使用主机名称而无需输入一大长串的I ...
- 对象(List<T>)的序列化和反序列化
本文描述将对象(List<T>)序列化到 XML 文档中和从 XML 文档中反序列化为对象(List<T>). 命名空间: System.Xml.Serialization 程 ...
- node express 学习2
上次我们的express已经安装好了 接下来我们修改渲染引擎为html // view engine setup app.set('views', path.join(__dirname, 'view ...