highcharts动态报表+Json用法

首先第一步：需要添加highcharts.js的jar包

       第二步：在页面中加入  

   <div id="mapcontainer" style="width:900px;height:0px;top:0px;left:120px;z-index:102;position:absolute;overflow-y:auto;overflow-x:hidden;display:none;text-align:center;">    <a id="closecontainer" href="javascript:closetongji()" style="position:absolute;right:20px;top:20px;display:none;"><img src="/images/close.png"></img></a>    <div id="container1" align="center" style="width:900px;height:550px;display:none;margin:0 auto; z-index: 101"></div>  </div>

       第三步：从数据库中获得数据放入json中

 

public String getLiudongGrid() {  //System.out.println("go to...");  //System.out.println("sesion:"+sesionstr);  HttpServletRequest req = ServletActionContext.getRequest();  String sqname = req.getParameter("sqname");  String gridname = req.getParameter("gridname");  String isflow = req.getParameter("isflow");  String starttime = req.getParameter("starttime");  String liudongmonth = req.getParameter("liudongmonth");  String liudongweek = req.getParameter("liudongweek");  //System.out.println("sqname:" + sqname + "gridname:" + gridname);  peoples.setSqid(sqname);  peoples.setGridid(gridname);  peoples.setIsflow(isflow);  peoples.setStarttime(starttime);  peoples.setLiudongmonth(liudongmonth);  peoples.setLiudongweek(liudongweek);  //System.out.println("go to 2...");  //  System.out.println("SESSION:"+session.getAttribute("pusergridids"));    if (sqname != "") {   list = this.liudongService.getLiudongGrid(peoples);  } else {   list = this.liudongService.getLiudongSQ(peoples);  }  //System.out.println(list.size());  JSONArray json = JSONArray.fromObject(list);  ServletActionContext.getResponse().setCharacterEncoding("utf-8");  try {   ServletActionContext.getResponse().getWriter().print(     json.toString());  } catch (IOException e) {   // TODO Auto-generated catch block   e.printStackTrace();  }  return null; }

        第三步：在js中接受json数据

var chart; function showHighCharts(data) {  //alert("data："+data);  //eval("var dataJson="+data);  //alert(data.length)  var shuzi=new Array();  for(var i=0; i<data.length; i++){   shuzi.push(parseInt(data[i].liudongnum));  }  //alert(Math.max.apply(null,shuzi));  var yzhi=Math.max.apply(null,shuzi);  yzhi=yzhi+(9-yzhi%9);  var timetitle0 = $('#sqname').find('option:selected').html();  var timegrid = $('#gridname').find('option:selected').html();  var timeisflow = $('#isflow').find('option:selected').html();  var timetitle=$('#starttime').val();  var timetitle2=$('#liudongmonth').val();  var timetitle3=$('#liudongweek').val();  var sqnameval=$('#sqname').val();  if(sqnameval==""){   timegrid="";  }  if(timetitle==""){   timetitle2="";   timetitle3="";  }  if(timetitle2==""){   timetitle3="";  }  var options= {   chart: {    renderTo: 'container1',//对应div的id    defaultSeriesType: 'column',//默认为柱状图    backgroundColor:'none',    borderColor: 'none'  //  type: 'column'   },   title: {    text : ((timetitle0 == "全部社区") ? '所有社区' : timetitle0)    + ((timegrid == "选择网格") ? '' : timegrid)    + ((timetitle == "") ? '所有年份' : timetitle + "年")    + ((timetitle2 == "") ? '' : timetitle2 + "月")    + ((timetitle3 == "") ? '' : '第' + timetitle3 + "周")    + ((timeisflow == "") ? '全部人员统计' : timeisflow + "统计"),// 设置标题栏名称    align : 'center',    style: {     //margin: '10px 100px 0 0', // center it     //font: 'normal 25px Verdana, sans-serif',//设置标题字体的样式     color: '#FFFFFF'    }   },   xAxis: {    categories: ['' //设置X轴坐标值                  ],     labels: {//X轴坐标值样式 //     rotation: -45, //     align: 'right',      style: {        font: 'normal 14px Verdana, sans-serif',        color:'#FFFFFF'      }     }    },    yAxis: {     tickInterval: yzhi/9, //自定义刻度     max: yzhi,//Y轴最大值          title: {      text: "流动人口数(人)",      style: {                   color: '#FFFFFF'               },               rotation: '270'     },     labels: {      style: {       color: '#FFFFFF'      }     },     gridLineColor: '#FFFFFF',     lineColor: '#FFFFFF',     tickPixelInterval: 50                //     plotLines: [{//      value: 3,//      width: 3,//      color:'#FFFFFF' //'#808080'//     }]                   },    credits: {     enabled: false    },    legend: {     borderWidth: 1,     backgroundColor: '#FFFFFF'    },     /* legend: {     layout: 'vertical',     backgroundColor: '#6E6E6E',     align: 'right',     style: {      left: 'auto',      right:'5px',      top: '180px',      bottom: 'auto'     }    }, */    tooltip: {//鼠标放在图形上时的提示信息     formatter: function() {                   return  this.series.name+":"+this.y+"人";     },    style: {      color:'#1962a6'     }     },    plotOptions: {       column: {       pointPadding: 0.2,          borderWidth: 0,        pointWidth: 100 //设置柱子的宽度     }     }    //series:data  };    options.series = [];   for(var i=0; i<data.length; i++){   options.series[i] = {                   name: data[i].sqname,       //         type: 'column',                  data: [parseInt(data[i].liudongnum)]               };  }  chart = new Highcharts.Chart(options);  $("#liudongtongjibg").show();  $("#mapcontainer").show();  $("#container1").show();  $("#closecontainer").show(); }  function getDataForHighcharts() {  //var data="";  // 此处异步请求数据库中的数据，这样可以只刷新报表显示部分  // data=...........    var sqname= $("#sqname").val();  var gridname=$("#gridname").val();  var isflow=$("#isflow").val();  var starttime=$("#starttime").val();  var liudongmonth=$("#liudongmonth").val();  var liudongweek=$("#liudongweek").val();  if(sqname==""){   gridname="";  }  if(starttime==""){   liudongmonth="";   liudongweek="";  }  if(liudongmonth==""){   liudongweek="";  }  //alert('sqname:'+sqname+"gridname:"+gridname+'isflow:'+isflow+'starttime:'+starttime+'month:'+liudongmonth+'week:'+liudongweek);  var urlAction='/liudongSearch!getLiudongGrid.action';  if(!(powerMatch(urlAction))){   return false;  }  $.ajax({   type:'post',                         //数据发送方式    async:false,                         // 设置同步方式   url:urlAction,   data:{sqname:sqname,gridname:gridname,isflow:isflow,starttime:starttime,liudongmonth:liudongmonth,liudongweek:liudongweek},   dataType:'JSON',                     //接受数据格式    error:function(){alert("出错啦");},   success: function(data){    //alert(data);    if(data.length<1){     alert("此项暂时没有数据!");     $("#container1").hide();     $("#liudongtongjibg").hide();     return;    }    showHighCharts(data);   }  });     }

 这样一个HighCharts动态柱形图就做好啦。

 如果不懂的话可以给我留言。。。