highcharts 兑现曲线报表

由于业务上的需求，网上找了不少例子，最终选择了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);

?

?

?

1 楼 zhangpurple 2011-08-15  

完整例子共享一下

8 楼 308202251 2012-02-18  

请问下LZ。。可以发给我完整的例子吗？？[email protected]