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 ...
随机推荐
- ZooKeeper应用场景介绍
ZooKeeper是一个高可用的分布式数据管理与系统协调框架.维护着一个树形层次结构,书中的节点被称为znode.znode可以用来存储数据,并且有一个与之相关联的ACL(权限),znode不能大于1 ...
- POJ 2528 Mayor's posters(线段树区间染色+离散化或倒序更新)
Mayor's posters Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 59239 Accepted: 17157 ...
- apache日志文件太大的问题
apache日志文件太大的问题 处理Apache日志的两种方法 rotatelogs 是 Apache 2.2 中自带的管道日志程序 rotatelogs [ -l ] logfile [ rotat ...
- context:component-scan 分析
<context:component-scan> Web.xml中 <servlet> <servlet-name>springMVC</servlet-na ...
- jQuery 图片剪裁插件初探之 Jcrop
主页:http://deepliquid.com/content/Jcrop.html 官方下载地址:http://deepliquid.com/content/Jcrop_Download.html ...
- Ogre初入手:最简单的ogre程序骨架
本文内容主要参考于页面 http://www.ogre3d.org/tikiwiki/tiki-index.php?page=Ogre+Wiki+Tutorial+Framework Ogre是一个非 ...
- sshd调优
sshd调优:禁用dns查找,加快速度在sshd_config中设置:UseDNS no禁用root登录:建立普通用户在sshd_config中设置PermitRootLogin no以上设置需要重启 ...
- poj1012约瑟夫
#include<stdio.h>int a[14];int f(int k,int m){ int n,i,s; n=2*k;s=0; for(i=0;i<k;i ...
- fstream 坑解决办法
status_t SysWatcher::setWVer() { fstream myfile; myfile.open("/data/w_version", io ...
- openCV中IplImage的使用
http://blog.csdn.net/welcome_xu/article/details/7650680 IplImage结构详细分析 IplImage 结构解读: typedef stru ...