现手上有个项目,要做一个实时监控刷新图表(折线图),网上资料大多是直接从官网上下载的例子,实时从后台取数据到前台展示的资料不多,现把最近几天研究的Demo分享一下:
1. Jsp: liveTest.jsp
代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>折线图</title>
<script type="text/javascript"
src="<%= path%>/script/utils/jquery.min.js"></script>
<script type="text/javascript">
//很多参数不懂,看api去吧
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 10,
events: {
load: function() {
var series = this.series;
setInterval(function() {
var url = "<%=basePath%>/singins.do?method=getDataToJsonNew"; // 实时获取最新数据
$.ajax({
url: url,
type: "post",
cache: false,
dataType: "json",
data: {},
ifModified: false,
success: function(result){
jQuery.each(result, function(m, obj) {
var x = (new Date()).getTime();
var y0 = obj.value0;
var y1 = obj.value1;
var y2 = obj.value2;
series[0].addPoint([x, parseInt(y0)], true, true);
series[1].addPoint([x, parseInt(y1)], true, true);
series[2].addPoint([x, parseInt(y2)], true, true); //第三个参数为true,才能实时重画图表
});
}
});
}, 15000);
}
}
},
title: {
text: '10000号实时监控系统'
},
subtitle: {
text: '排班量,话务量'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 100,
},
yAxis: {
title: {
text: 'Value'
},
startOnTick: true, //为true时,设置min才有效
min: 0,
//minorTickInterval: 'auto',// y轴样式 网格的形式
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
crosshairs: true,
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>值:'+
Highcharts.numberFormat(this.y, 2) +'<br/>时间:'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x);
}
},
credits: {
enabled: false
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: '值:' + this.y +':<br/>时间:'+
Highcharts.dateFormat('%Y-%m-%e %H:%M:%S', this.x),
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: '排班量'
}, {
name: '话务量'
}, {
name: '接通量'
}]
};
var url = "<%=basePath%>/singins.do?method=getDataToJson";
$.ajax({
url: url,
type: "post",
cache: false,
dataType: "json",
data: {},
ifModified: false,
success: function(result){
var paiBan = [];
var huaWu = [];
var jieTong = [];
var time = (new Date()).getTime();
jQuery.each(result, function(m, obj) {
paiBan.push([
time + (m -19) * 15000,
parseInt(obj.value0) //此处相当重要,就是这里,让我纠结了N小时,直接obj.value是不行的,不知道为什么
]);
huaWu.push([
time + (m -19) * 15000,
parseInt(obj.value1) //此处相当重要,就是这里,让我纠结了N小时,直接obj.value是不行的,不知道为什么
]);
jieTong.push([
time + (m -19) * 15000,
parseInt(obj.value2) //此处相当重要,就是这里,让我纠结了N小时,直接obj.value是不行的,不知道为什么
]);
});
options.series[0].data = paiBan;
options.series[1].data = huaWu;
options.series[2].data = jieTong;
chart = new Highcharts.Chart(options);
}
});
});
});
</script>
</head>
<body>
<script src="<%= path%>/js/highcharts.js"></script>
<script src="<%= path%>/js/modules/exporting.js"></script>
<script type="text/javascript"
src="
>
<script type="text/javascript"
src="
http://www.highcharts.com/highslide/highslide.config.js"
charset="utf-8"></script>
<link rel="stylesheet" type="text/css"
href="
http://www.highcharts.com/highslide/highslide.css" />
<div id="container"
style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
2.后台相关代码:
/**
*
* @Title getDataToJson
* @Description 把后台数据转换为JSON
* @param mapping
* @param form
* @param request
* @param response
* @return
* @date Aug 8, 2012
*/
@SuppressWarnings("unchecked")
public ActionForward getDataToJson(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
try {
List list90 = singinService.getSinginList(null);
List<TestBean> list = new ArrayList<TestBean>(); //模拟数据
for (int i = -19; i <= 0; i++) {
TestBean tb = new TestBean();
Random random = new Random();
String value0 = String.valueOf(random.nextInt(10));
String value1 = String.valueOf(random.nextInt(10));
String value2 = String.valueOf(random.nextInt(10));
tb.setValue0(value0);
tb.setValue1(value1);
tb.setValue2(value2);
list.add(tb);
}
JSONArray jsonArray = JSONArray.fromObject(list); //封装成Json
response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/json;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print(jsonArray);
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
/**
*
* @Title getDataToJsonNew
* @Description 最新时间点数据
* @param mapping
* @param form
* @param request
* @param response
* @return
* @date Aug 10, 2012
*/
public ActionForward getDataToJsonNew(ActionMapping mapping,
ActionForm form, HttpServletRequest request,
HttpServletResponse response) {
try {
List<TestBean> list = new ArrayList<TestBean>();
TestBean tb = new TestBean();
Random random = new Random();
String value0 = String.valueOf(random.nextInt(10));
String value1 = String.valueOf(random.nextInt(10));
String value2 = String.valueOf(random.nextInt(10));
tb.setValue0(value0);
tb.setValue1(value1);
tb.setValue2(value2);
list.add(tb);
JSONArray jsonArray = JSONArray.fromObject(list); //封装成Json
response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/json;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print(jsonArray);
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
3.有图有真相