页面只需要导入highcharts.js跟它带的一个导出功能的js：exporting.js 由于自己的需求是按月查询所以有一个日期框架的js:WdatePicker.js 页面不用怎么该只需要在后台拼装好JSON数据即可
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'RegistStat.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><script type="text/javascript" src="js/jquery-1.8.2.min.js"></script><script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"></script><script type="text/javascript">function WdatePicker2() { WdatePicker({ skin: 'whyGreen', dateFmt: 'yyyy-MM' });} function check(){ var ctime = $("#firsttime").val(); var aform = document.getElementById("aform");aform.action="<%=path%>/stat.do?nimei=checkUserCountByTime2&oper=regist";aform.submit(); } $(function () { var chart; $(document).ready(function() { var options = { chart: { inverted: false,//可选，控制显示方式，默认上下正向显示 shadow:true,//外框阴影 backgroundColor:"#FFF", animation:true, borderColor:"#888", borderRadius:5, borderWidth:1, ignoreHiddenSeries:true, reflow:true, plotBorderWidth:1, alignTicks:true, renderTo: 'container', polar: true //（line,spline, scatter, splinearea bar,area,column） }, title: { text: '${ftime}月新增人数统计' }, subtitle: { text: 'develop by:Ultime' }, credits:{//右下角的文本 enabled: true, position: {//位置设置 align: 'right', x: -10, y: -10 }, //href: "http://www.highcharts.com",//点击文本时的链接 style: { color:'blue' }, text: "翠鸟新增人数统计"//显示的内容 }, xAxis: { title: { text: '日期' }, labels: { formatter: function() { return this.value+'号'; // clean, unformatted number for year } } }, yAxis: { min: 0,//纵轴的最小值 title: { text: '新增人数' }, labels: { formatter: function() { return this.value +'人'; } } }, tooltip: { formatter: function() { return this.x+'号'+this.series.name +'<b>'+ Highcharts.numberFormat(this.y, 0) +'人</b><br/> '; }, borderWidth: 2, //边框宽度(大小) style: { //提示框内容的样式 color: 'blue', padding: '10px', //内边距 (这个会常用到) fontSize: '9pt', } }, plotOptions: { area: { pointStart: 0, marker: { enabled: true, symbol: 'circle', radius: 2, states: { hover: { enabled: true } } } } }, series: [] } var ctime = $("#firsttime").val(); jQuery.get('stat.do?nimei=checkRegistUserCountByTime&firsttime='+ctime,function(data){ var data = eval("["+data+"]"); options.xAxis=data[data.length-1]; for(var i=0;i<data.length-1;i++){ options.series.push(data[i]); } chart = new Highcharts.Chart(options); }); });})</script> </head> <body><form id="aform" name="aform" action="stat.do?nimei=checkRegistUserCountByTime" method="post" ><script src="js/highcharts.js"></script><script src="js/modules/exporting.js"></script>时间： <input type='text' id='firsttime' name='firsttime' style='width:80px;' onClick='WdatePicker2()' value="${ftime}" /><input type="button" id="" name="" value="查看" onclick="check()"/><div id="container" style="min-width: 800px; height: 630px; margin: 0 auto"></div></form> </body></html>/** * 统计每天的游客及用户上线人数 */public void checkRegistUserCountByTime(ActionMapping mapping, ActionForm form,HttpServletRequest request,HttpServletResponse response) throws IOException{request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");response.setCharacterEncoding("UTF-8");PrintWriter out = response.getWriter();String firsttime= request.getParameter("firsttime");SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM");String ftime=formatter.format(new Date());if(firsttime!=null&&firsttime!=""){ ftime=firsttime;}request.setAttribute("ftime", ftime);List<Channel> chList = userStatisticsService.getRegistCount(ftime);StringBuffer sb = new StringBuffer("{name: '新增人数',data: [");String a ="";//全部人数String a2 ="";//游客人数String a3 ="";//用户人数String b="";//日期if(chList!=null&&chList.size()>0){for(int i=0;i<chList.size();i++){ a += chList.get(i).getAllChCount()+","; a2+= chList.get(i).getTouristCount()+","; a3+= chList.get(i).getAllChCount()-chList.get(i).getTouristCount()+","; b += "'"+chList.get(i).getChName()+"',"; }a=a.substring(0, a.length()-1);a2=a2.substring(0, a2.length()-1);a3=a3.substring(0, a3.length()-1);b=b.substring(0, b.length()-1);sb.append(a);sb.append("]},");sb.append("{name: '新增游客',data: [");sb.append(a2);sb.append("]},");sb.append("{name: '新增用户',data: [");sb.append(a3);sb.append("]},");sb.append("{categories:[");sb.append(b);sb.append("]}");a=sb.toString();}//上边是自己根据查出来的List数据拼的一个json 你可一根据自己的list拼写 ，格式固定为以下格式即可;/*String s = "{name: '用户',data: [1,2,3,4,5,6,7,8,9,10,11,12]}," + "{name: '游客',data:[12,11,10,9,8,7,6,5,4,3,2,1]},"+ "{categories:['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']}"; */out.print(a);}下边有highcharts做出来的图
