Highcharts简介
最近要做一个油田油压或温度数据的监控软件，数据会秒级写到数据库中，界面上需要动态展示数据跟随时间变化。
在网上找了很多js插件，希望能够即时高效的展示数据，最终确定了使用Highcharts插件。
Highcharts插件可以免费使用，而且可以高效的展示数据，下面先上一张效果图：
数据通过ajax每秒向数据库请求，图形跟随时间的变化向左移动。使用方法如下：
1.前台界面
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
}); var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, 'rgb(96, 96, 96)'],
[1, 'rgb(16, 16, 16)']
]
},
borderWidth: 0,
borderRadius: 15,
plotBackgroundColor: null,
plotShadow: false,
plotBorderWidth: 0,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
var loaddata = function () {
var x = (new Date()).getTime(); // current time
var y = 0;
$.ajax({
async: false,
type: "POST",
dataType: "json",
contentType: "application/json;charset=utf-8",
url: "DataHandler.ashx", //读取数据
success: function (result) {
y = parseInt(result.amount);
}
}); series.addPoint([x, y], true, true); $.ajax({
type: "POST",
dataType: "json",
url: "AddHandler.ashx", //模拟向数据库插入数据
success: function (msg) {
}
});
};
setInterval(loaddata, 5000);//每5s执行一次
}
}
},
title: {
text: '油压数据实时监控',
style: { color: '#FFFF00', fontSize: '16px' }
},
xAxis: {
title: {
text: '检测时间',
style: { color: '#FFFF00' }
},
type: 'datetime',
tickPixelInterval: 150,
labels: {
style: { color: '#FFE4B5' }
},
gridLineWidth: 1 },
yAxis: {
title: {
text: '油压(pa)',
style: { color: '#FFFF00' }
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
labels: {
style: { color: '#FFE4B5' }
}
},
tooltip: {
formatter: function () {
return '<b>油压：' + Highcharts.numberFormat(this.y, 2) + '</b><br/>'
+ '时间：' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) },
crosshairs: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#FFE4B5',
lineWidth: 1
}
}
},
legend: {
enabled: true
},
exporting: {
enabled: true
},
series: [{
name: '油压变化图',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i; for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 2000,
y: Math.random() * 100
});
}
return data;
})()
}]
});
});
});
</script>
</head>
<body>
<script src="highcharts.src.js" type="text/javascript"></script>
<script src="exporting.js" type="text/javascript"></script>
<div id="container" style="min-width: 310px; height:550px; margin: 0 auto">
</div>
</body>
</html>
2.Aajx读取数据程序：
public class DataHandler : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string test = SQLHelper.ExecuteScalar("SELECT TOP(1) amount FROM RealOil ORDER BY recordtime DESC").ToString();
//Random ran=new Random(0);
//test=ran.Next(15,100).ToString(); string jsonString = "{\"time\":1,\"amount\":\"" + test + "\"}"; context.Response.Write(jsonString);
} public bool IsReusable
{
get
{
return false;
}
}
}
Highcharts简介的更多相关文章
- highCharts图表入门简介
一.Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在W ...
- 在AngularJS中的使用Highcharts图表控件
一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...
- HighCharts学习笔记（一）HighCharts入门
一.HighCharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站 ...
- Highcharts入门+Highcharts基础教程，【非常值得学习的资料】
http://www.hcharts.cn/docs/index.php?doc=index Highcharts入门章节目录 Highcharts简介 Highcharts下载与使用 Highcha ...
- highcharts 图表库的简单使用
Highcharts简介: Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图 ...
- Highcharts下载与使用_数据报表图
Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web ...
- JAVAEE——BOS物流项目13：Quartz概述、创建定时任务、使用JavaMail发送邮件、HighCharts概述、实现区域分区分布图
1 学习计划 1.Quartz概述 n Quartz介绍和下载 n 入门案例 n Quartz执行流程 n cron表达式 2.在BOS项目中使用Quartz创建定时任务 3.在BOS项目中使用Jav ...
- Highcharts.js －纯javasctipt图表库初体验
一.highcharts简介以及引入 highcharts作为免费提供给个人学习.个人网站和非商业用途使用的前端图表演示插件的确使用起来十分方便和轻便.在我最近完成一个需求的时候用到了它, 它的兼容性 ...
- highcharts图表插件初探
转载请注明出处:http://www.cnblogs.com/liubei/p/highchartsOption.html HighCharts简介 Highcharts 是一个用纯JavaScrip ...
随机推荐
- 互联网科技今年九个兴奋点：O2O深耕细作，可穿戴设备分水岭
http://new.iheima.com/detail/2014/0204/58374.html i黑马观察到,2014年是O2O的深耕细作年,而线上和线下结合这一互联网化趋势,将会向更多产业扩散, ...
- 在8086中，[ idata],[bx]表示内存单元时。可能是一个字节，也可能是一个字。
可能表示一个字节,也可能表示一个字.主要由指令中另一个计算对象决定.如al表示一个字节.ax就表示一个字. 这个区别主要体现在循环中,偏移地址的循环变量是加1还是加2,al是偏移地址加1,ax是偏移地 ...
- 李洪强漫谈iOS开发[C语言-015]-变量的使用
- cocos2d-x mac or windows eclipse android ------ Eclipse工程里面还会有许多警告
由于公司的游戏项目比较特殊, coco2d-x 的 ios 和 android 的游戏 代码 没有采用 共享目录的开发方式.所以android 内的 c++ 游戏代码全部放在 jni 下, ...
- C#技术------垃圾回收机制(GC)
GC的前世与今生 虽然本文是以.NET作为目标来讲述GC,但是GC的概念并非才诞生不久.早在1958年,由鼎鼎大名的图林奖得主John McCarthy所实现的Lisp语言就已经提供了GC的功能,这是 ...
- URAL1244. Gentlemen(背包）
链接 以前做的题 VJ太水了 数组里面的数可能会小于0 当时没判断 #include <iostream> #include<cstdio> #include<cstri ...
- 利用if,else判断输入的是不是一个正整数
static void Main(string[] args) { while (true) { Console.Writ ...
- bzoj1914
这道题用转化补集的思想一下就很简单了考虑不包括原点的三角形,显然对于一个点,它与原点构成的直线在这条直线同侧的任意两点和这个点构成的三角形一定不是黄金三角形为了避免重复我们只考虑直线上方的两点然后我们 ...
- vijosP1567子串计数
描述现在有一个字符串,请求出这个字符串不相同的子串个数.YXY现在不会做,请你来帮忙…… n<=20W 题解: 后缀数组裸题,其实我在练习模板写对了没 代码: #include<cstdi ...
- JS中String,Math常用函数
String对象: 1.length属性 说明:获取字符串的长度 实例: var str="abc"; var i=str.length;//output:3 2.charAt() ...