一、WebRoot下导入两个js文件,并引入到jsp里javascript
<script type="text/javascript" src="js/highcharts/js/highcharts.js"></script> <script type="text/javascript" src="js/highcharts/js/modules/exporting.js"></script>
二、建立一个div,存放图html
<div id="main" style="float: left; width: 780;height:400; margin: 0 15px 0 -10px;"></div>
三、写js方法,调action,生成图片
java
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:柱状图jsp
spline:曲线图ide
若要生成曲线图,把column改为spline就能够了spa
所需的js文件到http://down.51cto.com/data/2128001下载。htm