异步刷新方式使用HighChart -

yuhui1988

浏览: 9929 次

最近访客更多访客>>

andrew898

zjxbllg2008

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

异步刷新方式使用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>

分享到：