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 ...
随机推荐
- Qt中如何写一个model（自定义一个RowNode，我没有碰到过）
在qt中,用到最多就是model/view的结构来表示数据层及表示层的关系.model用于给view提供数据.那如何来实现一个简单的树形model呢. 实现一个自己的model需要重载以下的方法: Q ...
- CentOS镜像163更新源
首先备份/etc/yum.repos.d/CentOS-Base.repo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-B ...
- js 中var that=this
js中经常出现var that=this,为什么这么做? http://stackoverflow.com/questions/4886632/what-does-var-that-this-mean ...
- jQuery 插件模板
1.为每一个DOM对象创建一个插件对象 模板定义: (function($) { $.pluginName = function(element, options) { var defaults = ...
- 【HDOJ】2045 不容易系列之(3)—— LELE的RPG难题
着色问题,递推,当超过3个块时,规律明显,此时可以是n-2的头尾重复+与头尾不同颜色,也可以是n-1+与头尾均不相同眼色情况.经典递推.注意long long. #include <stdio. ...
- Leap Years
Description: In this kata you should simply determine, whether a given year is a leap year or not. I ...
- BZOJ_2194_快速傅立叶之二_(FFT+卷积)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=2194 给出序列\(a[0],a[1],...,a[n-1]\)和\(b[0],b[1],... ...
- BZOJ_1012_[JSOI2008]_最大数maxnumber_(线段树/树状数组+RMQ)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1012 两种操作: 1.求序列末尾n个数中的最大值. 2.在序列末尾插入一个数. 分析 线段树求 ...
- Linux Kernel ‘exitcode_proc_write()’函数本地缓冲区溢出漏洞
漏洞名称: Linux Kernel ‘exitcode_proc_write()’函数本地缓冲区溢出漏洞 CNNVD编号: CNNVD-201311-061 发布时间: 2013-11-07 更新时 ...
- myeclipse安装svn插件的多种方式
开发者服务评测征文 十万现金悬赏大神 方法一:在线安装 1.打开HELP->MyEclipse Configuration Center.切换到SoftWare标签页. 2.点击Ad ...