highcharts做柱状图与曲线图

标签：highcharts   js   

1、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>

2、创建一个div，存放图

<div id="main"
					style="float: left; width: 780;height:400; margin: 0 15px 0 -10px;"></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下载。

本文出自 “没有水勒鱼” 博客，请务必保留此出处http://javaqun.blog.51cto.com/10687700/1725717

highcharts做柱状图与曲线图

标签：highcharts   js   

原文地址：http://javaqun.blog.51cto.com/10687700/1725717