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 ...
随机推荐
- 1. Nginx
参考: http://www.darrenfang.com/2014/02/install-php-with-nginx-on-ubuntu/ 安装: apt-get install python ...
- Apache Spark源码走读之16 -- spark repl实现详解
欢迎转载,转载请注明出处,徽沪一郎. 概要 之所以对spark shell的内部实现产生兴趣全部缘于好奇代码的编译加载过程,scala是需要编译才能执行的语言,但提供的scala repl可以实现代码 ...
- PHP fwrite() 函数与 file_put_contents() 函数的比较
两个 PHP 函数都可以把字符串保存到文件中,fwrite() 函数的格式是: int fwrite ( resource handle , string string [ , int length] ...
- CSS Questions:Front-end Developer Interview Questions
Describe what a "reset" CSS file does and how it's useful. What Is A CSS Reset? A CSS Rese ...
- Bootstrap页面布局24 - BS旋转木马功能
代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> < ...
- 【iTerm2】美化你的Terminal 赠佛祖像
我们开发就是喜欢各种酷炫的东西,对于有洁癖的我,连命令行都不放过了 先上图看效果,命令行显示高亮部分 实现过程: 第一步:.bash_prompt脚本 # ~/.bash_prompt # This ...
- duplicate symbol _OBJC_CLASS 错误处理方法
错误: ld: duplicate symbol _OBJC_CLASS_$_************ in **************** 一种可能性是你的项目的不同group里有着相同名称的类 ...
- 局部变量、结构体和main函数
在函数中定义的变量称为自动局部变量.因为每次调用该函数时,它们都自动“创建”,并且它们的只对于函数来说是局部的,局部对象的变量都会默认为空.局部变量的值只能在定义该变量的函数中访问,不能从函数之外访问 ...
- .NET同页面内用户控件与父页面以及控件之间方法调用
用户控件调用父页面的方法: //获得父页面 Page p =this.Parent.Page; Type pageType = p.GetType(); //父页面的方法名 MethodInfo mi ...
- Google物联网操作系统协同框架Weave深度解析
1. Google Weave框架 在2015年的Google I/O大会上,负责Android业务的桑达.皮查伊(SundarPichai)宣布了Google最新的物联网战略.这包括一个 ...