highcharts做柱状图与曲线图

来源：互联网发布：程序员求职app 编辑：程序博客网时间：2024/04/29 11:43

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://download.csdn.net/detail/sinat_31998357/9365059下载。

1 0