highcharts作柱狀圖與曲線圖

一、WebRoot下導入兩個js文件，並引入到jsp裏

<script type="text/javascript" src="js/highcharts/js/highcharts.js"></script>
<script type="text/javascript" src="js/highcharts/js/modules/exporting.js"></script>

二、建立一個div，存放圖

<div id="main"
					style="float: left; width: 780;height:400; margin: 0 15px 0 -10px;"></div>

三、寫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下載。