http://www.myexception.cn/web/1450013.html
异步刷新方式使用HighChart
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="<%=basePath%>js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/highcharts.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',//图表的页面显示容器
defaultSeriesType: 'spline',//图表的显示类型(line,spline,scatter,splinearea bar,pie,area,column)
marginRight: 125,//上下左右空隙
marginBottom: 25 //上下左右空隙
},
title: {
text: '室内/室外温度实时采集图表',//主标题
x: -20 //center
},
subtitle: {
text: 'develop by:Sammy',//副标题
x: -20 //center
},
xAxis: { //横坐标
},
yAxis: {
title: {
text: '温度' //纵坐标
},
plotLines: [{ //标线属性
value: 0,
width: 1,
color: 'red'
}]
},
tooltip: { //数据点的提示框
formatter: function() { //formatter格式化函数
return '<b>'+ this.series.name +'</b><br/>'+
this.y +'°C';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
};
jQuery.get('http://localhost:8080/testChart/pp.do',function(data){
//var data = "{name: 'Tokyo',data: [[1283644800000,966],[1283731200000,2475],[1283817600000,3336],[1283904000000,1316]]},{name: 'New //York',data:[[1283644800000,433],[1283731200000,983],[1283817600000,1463],[1283904000000,1316]]}";
var data = eval("["+data+"]");
var da = eval("[{categories:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}]")
options.xAxis=da[0];
for(var i=0;i<data.length-1;i++){
options.series.push(data[i]);
}
chart = new Highcharts.Chart(options);
});
});
})
</script>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>