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 ...
随机推荐
- Grunt - 前端开发所见即所得
首先要安装全局的grunt-cli sudo npm install grunt-cli -g 1,项目中初始化npm文件,项目名不要和[关键词]如grunt重复,一直回车即可 npm init 2, ...
- [转]Entity Framework走马观花之把握全局
本文转自:http://blog.csdn.net/bitfan/article/details/12887007 Entity Framework走马观花 之 把握全局 ============== ...
- [ZZ] Deferred Rendering and HDR
http://www.gamedev.net/topic/496785-deferred-rendering-and-hdr/ Quote: Original post by jstrohYeah I ...
- Klayge 引擎的安装
http://www.klayge.org/wiki/index.php?title=%E4%BE%8B%E5%AD%90%E7%A8%8B%E5%BA%8F&redirect=no& ...
- 获取android设备的IP
public class IPAddressUtils { public static String getLocalIpAddress() { try { String allIP = " ...
- Xamarin学习资源收集
推荐入门视频 跨行動平台App開發概觀- 使用Xamarin+Visual Studio https://www.youtube.com/watch?v=ELuFTTn1gS4 中文产品介绍http: ...
- java时间格式串
yyyy-mm-dd 和yyyy-MM-dd转换出来的日期不用. 用"yyyy-MM-dd"
- go access database demo
package main import ( "database/sql" "fmt" _ "github.com/lib/pq" " ...
- POJ 1236 Network of Schools (Tarjan + 缩点)
Network of Schools Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 12240 Accepted: 48 ...
- docker gitlab,redmine,etc development enviroments
sameersbn-gitlab is better more than officals sameersbn/redmine https://hub.docker.com/r/sameersbn/r ...