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動態柱形圖就做好啦。

 如果不懂的話可以給我留言。。。