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 ...
随机推荐
- Error -27791: Server xx has shut down the connection prematurely
最近在进行一次性能测试中遇到一个问题,并发较大的时候会出现LR出现Error -27791: Server xx has shut down the connection prematurely的ER ...
- ZOJ - 2615 Cells
注意数组别开太小了,代码照着训练经典打的: #include <iostream> #include <sstream> #include <cstdio> #in ...
- UVA 10651 Pebble Solitaire 状态压缩dp
一开始还在纠结怎么表示一个状态,毕竟是一个串.后来搜了一下题解发现了这里用一个整数的前12位表示转态就好了 ,1~o,0~'-',每个状态用一个数来表示,然后dp写起来就比较方便了. 代码: #inc ...
- Easyui Datagrid rownumbers行号四位、五位显示不完全的解决办法
Easyui Datagrid rownumbers行号四位.五位显示不完全的解决办法(引) 方法一: 相信很多人在使用easyui的时候都遇到过这个问题,当我们设置成显示Rownumber的时候,你 ...
- QReadWriteLock 读写锁的区别
QReadWriteLock 这个允许多个进程同时读,但是只有一个写.而且写读不能同时进行. 文档里语焉不详,这是我自己的理解: lockForWrite 为写而锁,就是要修改数据,外人连想进来读数据 ...
- EqualsBuilder和HashCodeBuilder
package com.osc.demo; import java.util.List; import org.apache.commons.lang.builder.EqualsBuilder; i ...
- 【HDOJ】2054 A == B ？
这道题目起初看,so easy.再看一下ac率,注意到没有说明变量类型.显然是一道字符串的题.需要考虑+/-符号位,+.1.-.1.00010.0.+0.-00.00等情况,同时数组开到100000以 ...
- Moduli number system
A number system with moduli is defined by a vector of k moduli, [m1,m2, ···,mk]. The moduli must be p ...
- c#浅谈反射内存的处理
这段时间由于公司的项目的要求,我利用c#的反射的机制做了一个客户端框架.客户端里的所有的模块都是以一定形式进行提供,例如:FORM,UserControl. 在做的过程中很简单与愉快.具体的过程如下: ...
- LA_4670_Dominating_Patterns_(AC自动机+map)
描述 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...