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 ...
随机推荐
- MySQL5.7安装过程以及参数和设置说明
最近在讲MySQL课程,为了省事就在用MySQL5.5版本.因为win10不论32还是64都可以运行MySQL32位.可有很多使用者了解MySQL官网之后,去下载最新版的MySQL来使用,这点我不反对 ...
- CSS3 Transform——transform-origin
2012年9月,W3C组织发布了CSS3变形工作草案.CSS3变形允许CSS把元素转变为2D 或3D空间,这个草案包括了CSS3 2D变形和CSS3 3D变形. CSS3变形是一些效果的集合,比如平移 ...
- HTTP 笔记与总结(9)分块传输、持久链接 与 反向 ajax(comet / server push / 服务器推技术)
反向 ajax 又叫 comet / server push / 服务器推技术 应用范围:网页聊天服务器,例如新浪微博在线聊天.google mail 网页聊天 原理:一般而言,HTTP 协议的特点是 ...
- IS_POST:判断是否存在POST提交
IS_POST:判断是否存在POST提交 在程序中可以使用IS_POST来做优化..如果有提交.我们再执行下一步动作.节省开销
- 资源(1)----封装类(连接数据库mysql,分页)
一,链接MYSQL数据库 class DBDA{ public $host="localhost";//服务器地址 public $uid="root";//数 ...
- Anti-pattern
https://en.wikipedia.org/wiki/Anti-pattern https://zh.wikipedia.org/wiki/反面模式 An anti-pattern is a c ...
- HTML5 本地存储 LocalStorage
说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个co ...
- cvWaitKey 如果 cvNamedWindow就不会起作用
Have you called cvNamedWindow yet? It will not work without cvNamedWindow. http://stackoverflow.com/ ...
- ASP.NET WebForm与ASP.NET MVC的不同点
ASP.NET WebForm ASP.NET MVC ASP.NET Web Form 遵循传统的事件驱动开发模型 ASP.NET MVC是轻量级的遵循MVC模式的请求处理响应的基本开发模型 ASP ...
- sp.net2.0中的新增控件BulletedList的一些高级用法
asp.net2.0新增了一个BulletedList控件,通过它可以以列表形式显示数据,而不必再用Repeater,Datalist等实现相同的效果.今天做程序的时候正好用到了这个控件,就把它的一些 ...