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 ...
随机推荐
- php smarty section使用
文件:section.tpl <html> <head> <title></title> </head> <body> {sec ...
- android 设备唯一码的获取，Cpu号，Mac地址
开发Android应用中,我们常常需要设备的唯一码来确定客户端. Android 中的几中方法,使用中常常不可靠 1. DEVICE_ID 假设我们确实需要用到真实设备的标识,可能就需要用到DEVIC ...
- asp.net 框架初接触
1. 在web层的Default.aspx里只有最基本的UI代码 2. 在web层的Default.aspx.cs里第一行创建一个用户业务对象UserBO (注意添加引用,下同) protected ...
- java的几种for循环方法
自从jdk升级为1.8以后,for循环又升级了 classic for classic foreach List.forEach() List.stream().forEach() List.para ...
- vi/vim 基本使用
摘要: 在minicom终端里修改开发板中的文件时,必须要用到vi,因为开发板中并不像开发主机那样,有gedit和kscope这样的编辑器:还有,即便是在开发主机上,也会经常用到vi,因为vi使用起来 ...
- poj 1167 简单搜索
这题主要是注意好限定的条件 条件1:每个公交车都至少要到达两次 条件2:公交车相同时间和相同间隔是属于两种车辆 条件3:不同的车可能到达时间相同 上述都是深搜的重要条件: #include<al ...
- apache虚拟主机的设置
方法一: 首先打开apache中conf下的http.conf文件打开虚拟主机的注释:如下去掉第二行前面的#即可 # Virtual hosts# Include conf/extra/httpd-v ...
- 【转】【iOS知识学习】_视图控制对象生命周期-init、viewDidLoad、viewWillAppear、viewDidAppear、viewWillDisappear等的区别及用途
原文网址:http://blog.csdn.net/weasleyqi/article/details/8090373 iOS视图控制对象生命周期-init.viewDidLoad.viewWillA ...
- HDU 2191
思路:简单动态规划,多重背包转化成0 1背包问题 #include<stdio.h> #include<string.h> int a[101][2001],rcw[2001] ...
- 多组 RadioButtonList 获取值
<div class="row"> <table> <thead><tr><th>操作</th ...