现手上有个项目，要做一个实时监控刷新图表(折线图)，网上资料大多是直接从官网上下载的例子，实时从后台取数据到前台展示的资料不多，现把最近几天研究的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.有图有真相
- 大小: 86.9 KB
分享到：
相关推荐
jquery Highcharts jquery Highcharts jquery Highcharts
jQuery highcharts实时更新数据的图表插件源码.zip
jQuery highcharts适时更新加载的图表插件，当图片加载数据后，立即绘制出曲线图，若数据有更新，会适时加载数据，并重新生成曲线图，是一款适时加载数据并更新曲线图的图表插件。在测试时，你会发现，图片自右向左...
今天我们要来分享一款基于jQuery的highcharts实时图表插件，highcharts图表插件定义了每隔一秒钟更新数据，然后根据每个数据点绘制一条折线，随着数据的更新，折线也就会不停的向前移动，形成一个类似CPU实时监控的...
jQuery+highcharts各种数据统计图表代码 jQuery+highcharts各种数据统计图表代码 jQuery+highcharts各种数据统计图表代码
Highcharts是一个制作图表的Javascript类库，可以制作的图表有：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散状图等等
Highcharts是一个制作图表的纯Javascript类库，主要特性如下： * 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等； * 对个人用户完全免费； * 纯JS，无BS； * 支持大部分的图表类型：直线图，曲线图...
• 跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库； • 提示功能：鼠标移动到图表的某...
Highcharts图片控件 网上一搜一大片的不过很多都是 文档介绍，而这里这个是C#源代码，熟悉C#开发的朋友可以一直拿来用，其他语言开发的也可以从源代码上分析出如何使用，非常方便。
使用jquery插件Highcharts做的实时动态的图表，使用ajax访问后台数据（模拟）, 代码里有注释说明；
由于项目需要对根据Highcharts的实例及大量的尝试， 改造出实时流量趋势图
AAChartKit基于前端图表库Highcharts封装的一组图表绘制控件
里面附带例子，易懂易学，欢迎下载。互相交流。
这其实是一个制图库，整个运行部分都是用纯JavaScript编写的，可以给你的网页提供互动图表。Highcharts支持大部分的图表类型，包括直线图、样条图、列状图、条形图等等。
Highcharts2.3.2的zip包图表展示必备，纯js的图表展示，可以很漂亮
NULL 博文链接：https://topmanopensource.iteye.com/blog/1278823
很不错的示例，各位可以瞅一瞅，对小白的帮助很大