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 ...
随机推荐
- php的源代码包构建一个空的php扩展。
下载一个php的源代码包,这里使用的是php 4.0.5版,解压后会看到php的根目录下会有README.EXT_SKEL这样一个文件,打开详细阅读了一下,发现了一个非常好用的工具,这个工具可以帮你构 ...
- php 获取当前脚本的url的案例
关于用php 获取当前脚本的url很多朋友会说很简单,但是要获取很详细的就要经过多次判断. $PHP_TIME = time();$PHP_SELF = isset($_SERVER['PHP_SEL ...
- windows 通过ssh连接到Linux主机
1. 确定Linux主机已经开启了ssh功能. 1.1--确认sshserver是否启动 ps -e |grep ssh 如果只有ssh-agent那ssh-server还没有启动,需要/etc/in ...
- [APAC]手动截取当前活动窗口,并且按规则命名(1/2)
Function Take-ScreenShot { <# .SYNOPSIS Used to take a screenshot of the desktop or the active wi ...
- Java垃圾收集机制
通常,我们把分配出去后,却无法回收的内存空间称为"内存渗漏体(Memory Leaks)". 以上这种程序设计的潜在危险 性在Java这样以严谨.安全著称的语言中是不允许的.但是J ...
- Grand Theft Auto V 图形研究(2)
原文链接 http://www.adriancourreges.com/blog/2015/11/02/gta-v-graphics-study-part-2/ Level of Detail 如 ...
- 使用CodeIgniter框架搭建RESTful API服务
使用CodeIgniter框架搭建RESTful API服务 发表于 2014-07-12 | 分类于 翻译笔记 | 6条评论 在2011年8月的时候,我写了一篇博客<使用Cod ...
- C# Xml文件操作,解释见注释
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- PHP 中获取当前时间[Datetime Now]
在 PHP 中可以通过date()获取当前时间,在>5.2的版本中最好还是用 datetime 类型 date() <?php echo date('Y-m-d H:i:s'); ?> ...
- using System.Diagnostics; 日志操作
using System.Diagnostics 命名空间 包含了能够与系统进程 事件日志 和性能计数器进行交互的类 一般用于帮助诊断和调试应用程序 例如 Debug类用于帮组调试代码 Process ...