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 ...
随机推荐
- 如何设置EditPlus的默认编码utf-8方式
最近在使用英文版的Editplus写代码的时候,发现中文字符在调试过程中都变成了乱码,发现是Editplus编码设置的问题,Editplus默认编码可能是ANSI,需要将其改成UTF-8.干脆给设置默 ...
- live555
相关资料: Live555 是一个为流媒体提供解决方案的跨平台的C++开源项目,它实现了对标准流媒体传输协议如RTP/RTCP.RTSP.SIP等的支持.Live555实现 了对多种音视频编码格式的音 ...
- PCB使用技巧
1.元器件标号自动产生或已有的元器件标号取消重来Tools 工具|Annotate…注释All Part:为所有元器件产生标号Reset Designators:撤除所有元器件标号2.单面板设置:De ...
- ServletInvocableHandlerMethod:167 - Error resolving argument
at org.springframework.web.method.annotation.RequestParamMethodArgumentResolver.handleMissingValue(R ...
- TCP 协议如何保证可靠传输
一.综述 1.确认和重传:接收方收到报文就会确认,发送方发送一段时间后没有收到确认就重传. 2.数据校验 3.数据合理分片和排序: UDP:IP数据报大于1500字节,大于MTU.这个时候发送方IP层 ...
- leetcode面试准备:Reverse Words in a String
leetcode面试准备:Reverse Words in a String 1 题目 Given an input string, reverse the string word by word. ...
- 【HDOJ】1074 Doing Homework
最开始以为是贪心,不过写到一半发现不对,看了一下讨论,知道需要使用状态压缩DP,现在还没有使用深搜实现(据说可以)晚上实现一下,道理应该是类似的.前面做八数码,至今未果,就说需要状态压缩.这个太神奇了 ...
- amaze UI的使用
1.放置在独立的位置 2.引入核心css与js <link href="{sh::PUB}amaze-ui/css/amazeui.min.css" rel="st ...
- EF多数据库预热
使用EF第一次加载程序会很慢,因为EF第一次会生成实体类和数据库的对应关系并做缓存,怎么解决这个问题呢?站在巨人的肩膀上将会省力很多,博客园的dudu已经给出了个解决方案(EF版本6.0以上) htt ...
- memcached SASL验证状态安全绕过漏洞
漏洞版本: memcached 1.x 漏洞描述: Memcached是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载. Memcached在处理链接的SASL验证状态时存在错 ...