highcharts 实现曲线报表

wlhbye

浏览: 27275 次
性别:
来自: 北京

最近访客更多访客>>

IThanshui

bug_

hsz9747

vambadoz

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (11)

社区版块

存档分类

Java Web JSP jQuery json

由于业务上的需求，网上找了不少例子，最终选择了highcharts 来实现曲线报表。下面我把个人心得与大家分享下：

如上图所示

X轴为整点时间轴

Y轴为数据坐标轴

该功能主要是检测当天某时间检测到的数据。

代码如下所示：

Highcharts.setOptions({global:{useUTC : false}});
$(function(){  
	//声明报表对象  
	var chart = new Highcharts.Chart({  
		chart: {
		renderTo: 'container', // 报表显示在 页面位置 container 为 div 定义的属性
		defaultSeriesType: 'spline', // 定义报表类型 例如：line ，spline ，colume
		events: {
				load:  getForm  //调用js 方法
			}
		},
		title:{
			text:'实时监测曲线图" //定义曲线报表 名称
		},
		xAxis: {
			type: 'datetime', // 定义时间轴的 类型
			maxPadding : 0.05,
			minPadding : 0.05,
			tickWidth:1,//刻度的宽度
			lineWidth :1,//自定义x轴宽度
			gridLineWidth :1,//默认是0，即在图上没有纵轴间隔线
			lineColor : '#990000' 	
		},
		yAxis: {
				max:12, // 定义Y轴 最大值
				min:0, // 定义最小值
				minPadding: 0.2, 
				maxPadding: 0.2,
				tickInterval:1, // 刻度值
				title: {
					text: 'PH值'
				},
				// plotLines 表示为定义曲线报表中的 （刻度线）或者叫做（定义的区间范围）
// 一下为2条表示线
				plotLines: [{ 
							value: 6,
							color: 'green',
							dashStyle: 'shortdash',
							width: 2,
							label: {
								text: '正常'
							}
						},{
							value: 8,
							color: 'green',
							dashStyle: 'shortdash',
							width: 2,
							label: {
								text: '正常'
							}
						}
				}]
		},
		tooltip: {  // 表示为 鼠标放在报表图中数据点上显示的数据信息
			formatter: function() {
				  return '<b>'+'日期:' +'</b>'
+Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
				   '<b>'+'<%=lbname%>:' +'</b>'+ this.y+'  <%=shll%>';
			}
		},
		series: [{
			name: 'PH',
			data: [] // 此处存放数据值 用,分开 例如：1.8,8.9,null,9.2,   如果在某一点数据为空  
//可以用null 来表示 
			//如果是想动态扶植  这个位置 应该为空 即：data: []
		}]
	});  
	// 与后台进行数据交互
	function getForm(){  
		jQuery.getJSON("test!test.do?id=123456", null, function(data) {   
			//为图表设置值   
			chart.series[0].setData(data);   
		});   	
	}  
	//定时刷新 列表数据
   $(document).ready(function() {  
	   //每隔3秒自动调用方法，实现图表的实时更新  
	   window.setInterval(getForm,50000);   
   });  
});

//定义 曲线报表图 的样式
	Highcharts.theme = {
	   colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
 '#FFF263', '#6AF9C4'],
	   chart: {
		  backgroundColor: {
			 linearGradient: [0, 0, 500, 500],
			 stops: [
				[0, 'rgb(255, 255, 255)'],
				[1, 'rgb(240, 240, 255)']
			 ]
		  },
		  borderWidth: 2,
		  plotBackgroundColor: 'rgba(255, 255, 255, .9)',
		  plotShadow: true,
		  plotBorderWidth: 1
	   },
	   title: {
		  style: { 
			 color: '#000',
			 font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
		  }
	   },
	   subtitle: {
		  style: { 
			 color: '#666666',
			 font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
		  }
	   },
	   xAxis: {
		  gridLineWidth: 1,
		  lineColor: '#000',
		  tickColor: '#000',
		  labels: {
			 style: {
				color: '#000',
				font: '11px Trebuchet MS, Verdana, sans-serif'
			 }
		  },
		  title: {
			 style: {
				color: '#333',
				fontWeight: 'bold',
				fontSize: '12px',
				fontFamily: 'Trebuchet MS, Verdana, sans-serif'

			 }            
		  }
	   },
	   yAxis: {
		  //minorTickInterval: 'auto'  // 此处会在Y轴坐标2点之前出现小格  所以就没有使用。
	   },
	   legend: {
		  itemStyle: {         
			 font: '9pt Trebuchet MS, Verdana, sans-serif',
			 color: 'black'
		  },
		  itemHoverStyle: {
			 color: '#039'
		  },
		  itemHiddenStyle: {
			 color: 'gray'
		  }
	   },
	   labels: {
		  style: {
			 color: '#99b'
		  }
	   }
	};
	var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

针对于此种情况的后台返回的参数如：[new DATE().gettime(),12] --->[时间，数据]

后台传值为：[[new DATE().gettime(),12] ,[new DATE().gettime(),10] ,[new DATE().gettime(),9] ]

根据查询返回的list

        JSONArray array = new JSONArray();
        array.addAll(list);
        response.getWriter().println(array.toString());

返回结果集到前台js中去

上图是实现的月报表，主要是查询系统当前月每天的平均数的记录

sql：

select round(avg(jcsz), 2) jcsz ,mdate from (

	select to_char(to_date(substr(z_date,1,10),'yyyy-mm-dd'), 'dd') mdate, jcsz  

	from table  where z_date like '%"2011-07-07"%'  and cydd = '123456'
	
) a  group by a.mdate order by mdate

如果某天数据不存在则需要补空 ‘null’

补空后台代码：

Set<Integer> set = new HashSet<Integer>();
for(int a =1 ; a<31 ; a++){
	set.add(a);
}

for(int k:set){
	boolean flag = false;
	
	for(int i = 0 ; i<list.size() ; i++){
		Test test = list.get(i);
		int day = test.getInt("MDATE");
		if(k==day){
			map.put(k, bean.getStr("JCSZ"));
			flag = true;
		}
	}
	if(flag)
		continue;
	map.put(k, "null");
}

传map返回页面

request.setAttribute("map", map);

前台代码

var chart;
jQuery(document).ready(function() {
	chart = new Highcharts.Chart({
		chart: {
			renderTo: 'container',
			defaultSeriesType: 'spline'
		},
		title: {
			text:  "月监测曲线图",
			x: -20  
		}, 
		xAxis: {
			maxPadding : 0.05,
            minPadding : 0.05,
			tickPixelInterval : 10,
	        tickWidth:5,//刻度的宽度
	        lineColor : '#990000',//自定义刻度颜色
	        lineWidth :1,//自定义x轴宽度
	        gridLineWidth :1,//默认是0，即在图上没有纵轴间隔线
			categories: ['1', '2', '3', '4', '5', '6',  '7', '8', '9', '10', '11', '12', '13', '14', '15',
 '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30','31']		
			},
		yAxis: {
			 max:12, 
			 min:0,
		     minPadding: 0.2,
		     maxPadding: 0.2,
		     tickInterval:1,
			title: {
			text: 'test'
		},
		plotLines: [{
			        	value: 150,
			        	color: 'green',
			        	dashStyle: 'shortdash',
			        	width: 2,
			        	label: {
			        		text: '正常'
			        	}
					},
				   	{
			        	value: 1,
			        	color: 'green',
			        	dashStyle: 'shortdash',
			        	width: 2,
			        	label: {
			        		text: '正常'
			        	}
			        }]
		},
		tooltip: {
			formatter: function() {
	                return '<b>'+ '第' +'</b>'+ this.x +' 天 : '+ this.y;
			}
		},
		series: [ {
			name: 'test',
			data: [ <%
					Map map = (Map)request.getAttribute("map");
						Iterator it = map.entrySet().iterator();
						String valuee =" ";
						while (it.hasNext()) {   
					
							Map.Entry entry = (Map.Entry) it.next();   
					
							Object key = entry.getKey();   
							valuee+= entry.getValue()+",";
						}
						out.println(valuee);
					%>	
				]
		}]
	});
});

Highcharts.theme = {
   colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', 
'#FFF263', '#6AF9C4'],
   chart: {
	  backgroundColor: {
		 linearGradient: [0, 0, 500, 500],
		 stops: [
			[0, 'rgb(255, 255, 255)'],
			[1, 'rgb(240, 240, 255)']
		 ]
	  },
	  borderWidth: 2,
	  plotBackgroundColor: 'rgba(255, 255, 255, .9)',
	  plotShadow: true,
	  plotBorderWidth: 1
   },
   title: {
	  style: { 
		 color: '#000',
		 font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
	  }
   },
   subtitle: {
	  style: { 
		 color: '#666666',
		 font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
	  }
   },
   xAxis: {
	  gridLineWidth: 1,
	  lineColor: '#000',
	  tickColor: '#000',
	  labels: {
		 style: {
			color: '#000',
			font: '11px Trebuchet MS, Verdana, sans-serif'
		 }
	  },
	  title: {
		 style: {
			color: '#333',
			fontWeight: 'bold',
			fontSize: '12px',
			fontFamily: 'Trebuchet MS, Verdana, sans-serif'

		 }            
	  }
   },
   yAxis: {
	  //minorTickInterval: 'auto'
	
	   
   },
   legend: {
	  itemStyle: {         
		 font: '9pt Trebuchet MS, Verdana, sans-serif',
		 color: 'black'

	  },
	  itemHoverStyle: {
		 color: '#039'
	  },
	  itemHiddenStyle: {
		 color: 'gray'
	  }
   },
   labels: {
	  style: {
		 color: '#99b'
	  }
   }
};

var highchartsOptions = Highcharts.setOptions(Highcharts.theme);