HighCharts +java 做图由于看不懂JfreeChar 搜到可用HighCharts作图的一个js，还简单，下面是自己的一个新增用户的统计图

最新推荐文章于 2021-02-25 09:37:53 发布

ultime

最新推荐文章于 2021-02-25 09:37:53 发布

阅读量1k

点赞数

分类专栏：ｊｓ文章标签： Highcharts highcharts HighCharts java Java JAVA 做图统计图

本文链接：https://blog.csdn.net/ultime/article/details/8488680

版权

ｊｓ专栏收录该内容

1 篇文章 0 订阅

订阅专栏

页面只需要导入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="查看" οnclick="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做出来的图