首先第一步:需要添加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动态柱形图就做好啦。
如果不懂的话可以给我留言。。。