1、WebRoot下导入两个js文件,并引入到jsp里

highcharts做柱状图与曲线图_第1张图片


2、创建一个div,存放图

3、写js方法,调action,生成图片

var x=[];
				var y=[];
				$.getJSON('dayOnePicRain.action?beginyear='+beginyear+'&endyear='+endyear
						+'&month='+month+'&day='+day+'&station='+station,function(data){
					if(data!=null){
						$.each(data.list,function(i,item){
							
							x.push(item.YEAR);
							y.push(item.AVG);
						
					});
					
					console.log(x);
					console.log(y);
					showChart(x,y);
					}else{
						alert("暂无数据");
					}
				});
				function showChart(x,y){

					var options =new Highcharts.Chart({
						chart : {
							renderTo : 'main',
							type : 'column',
						},
						credits: { 
				            enabled: false   //右下角不显示LOGO 
				        }, 
						title : {
							text : station+":"+beginyear + "年至" + endyear + "年"
							+ month+"月" +day+ "日降水变化柱状图"          //图表标题
						},
						xAxis : {
							categories:x
						},
						yAxis : {
							title : {
								text : '降水/mm'
							}
						},
						series : [{
							name:'降水',
							data:y
						}]
					});
				}

column:柱状图

spline:曲线图

若要生成曲线图,把column改成spline就可以了

所需的js文件到http://down.51cto.com/data/2128001下载。