利用ajax结合highchart和Spring实现数据可视化中的柱状图

发布时间：2020-12-16 01:44:35 所属栏目：百科来源：网络整理

导读：1.实现jsp页面 %@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%%String path = request.getContextPath();%!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml

1.实现jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>任务列表</title>
		<script type="text/javascript">
			var path = '<%=path%>';
		</script>
		<script type="text/javascript"
				src="<%=path%>/js/logoperate/jquery.min.js"></script>
		<script type="text/javascript"
				src="<%=path%>/js/logoperate/jquery.easyui.min.js"></script>
				<style type="text/css">
		#container,#sliders {
    		min-width: 310px; 
    		max-width: 800px;
    		margin: 0 auto;
		}
		#container {
    		height: 400px; 
		}
		</style>
	</head>

	<body style="margin:0px;">
		hello.world!
		<input type="button" value="mybutton" id="content" />
		<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts-3d.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>

<div id="container"></div>
	
	<script type="text/javascript">
	$(function () {
    // Set up the chart
    //var myresult = 10;
    var myresult;
	var sum;
	var running;
	var failed;
	var done;
	var pending;
    $.post("handledashboard.htm",{
					},function(result) {
					    //alert(result);
						document.getElementById("content").value = result;
						
						myresult = result.split(",");
						sum = Number(myresult[0]);
						running = Number(myresult[1]);
						failed = Number(myresult[2]);
						done = Number(myresult[3]);
						pending = Number(myresult[4]);
						alert(myresult);
						 var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',type: 'column',margin: 75,options3d: {
                enabled: true,alpha: 0,beta: 0,depth: 50,viewDistance: 25
            }
        },title: {
            text: '任务统计'
        },subtitle: {
            text: '以下是各种任务的数量'
        },plotOptions: {
            column: {
                depth: 25
            }
        },series: [{
            data: [{
                name: 'Sum',color: '#00FF00',y: sum
            },{
                name: 'Running',color: '#FF00FF',y: running
            },{
                name: 'Failed',color: '#FFFF00',y: failed
            },{
                name: 'Done',color: '#00FFFF',y: done
            },{
                name: 'Pending',color: '#000000',y: pending
            }
            ]
            }]
    });
					});
});
	</script>
	</body>
</html>

2.实现后台

@RequestMapping("/dashboard")
	public String dashboard(HttpServletRequest request,HttpServletResponse response) {
		logger.info("dashboard");
		return "dashboard";
	}
	
	@RequestMapping("/handledashboard")
	public String handledashboard(HttpServletRequest request,HttpServletResponse response) {
		logger.info("handledashboard");
		StringBuffer sb = new StringBuffer();
		int sum = etlJobService.getAllJobsCount();
		sb.append("Sum:" + sum + ",");
		int running = etlJobService.getJobsCountByStatus("Running");
		sb.append("Running:" + running + ",");
		int failed = etlJobService.getJobsCountByStatus("Failed");
		sb.append("Failed:" + failed + ",");
		int done = etlJobService.getJobsCountByStatus("Done");
		sb.append("Done:" + done + ",");
		int pending = etlJobService.getJobsCountByStatus("Pending");
		sb.append("Pending:" + pending + "n");
		logger.info("sb is " + sb.toString());
		try {
			//response.getWriter().write(sb.toString());
			response.getWriter().write(""+sum+","+running+","+failed+","+done+","+pending);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

3.运行结果

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!