自学highcharts饼图，springMVC框架，后台java，mysql数据库，官网下载Highcharts，留待以后备用
jsp页面代码：
<%@ 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>饼图</title>
<script type="text/javascript" src=\‘#\‘" /js/jquery-1.8.2.min.js"></script>
<script src=\‘#\‘" /js/Highcharts/js/highcharts.js"></script>
<script src=\‘#\‘" /js/Highcharts/js/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
var rand = Math.random();
$.ajax( {
url : "./pietest.do",
type : "post",
async : false,
data: "rand="+rand,
dataType: "json",
contentType : "application/x-www-form-urlencoded; charset=utf-8",
success : function(data, textStatus) {
var l = data.length;
var piedata = [];
for(var i=0;i<l;i++){
piedata.push(["‘"+data[i].sex+"‘", data[i].mrs]);
}
xspie(piedata);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("服务器请求失败！");
}
});
});
function xspie(p){
//var length = piedata.length;
$(‘#container‘).highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 1,//null,
plotShadow: false
},
title: {
text: ‘男女比例 , 2014‘
},
tooltip: {
pointFormat: ‘{series.name}: <b>{point.percentage:.1f}%</b>‘
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: ‘pointer‘,
dataLabels: {
enabled: true,
format: ‘<b>{point.name}</b>: {point.percentage:.1f} %‘,
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || ‘black‘
}
}
}
},
series: [{
type: ‘pie‘,
name: ‘男女比例‘,
data: p
}]
});
}
</script>
</head>
<body>
<div>饼图</div>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
</html>
java代码：
控制器：
@ResponseBody
@RequestMapping(value={"/pietest.do"}, method={RequestMethod.GET,RequestMethod.POST})
public void pietest(HttpServletRequest request,HttpServletResponse response) throws IOException{
System.out.println("111111111111111111111111111111");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
List<Map<String,Object>> list = null;
list = dialogDao.pieFindInfo();
JSONArray json = JSONArray.fromObject(list);
out.print(json);
}
接口实现：
public List<Map<String, Object>> pieFindInfo() {
List<Map<String, Object>> list = null;
try {
String sql = "SELECT IF(sex=1,‘男‘,‘女‘) sex,COUNT(*) mrs FROM student WHERE id IN (SELECT id FROM student WHERE sex = 1) UNION ALL SELECT IF(sex=0,‘女‘,‘男‘) sex, COUNT(*) fmrs FROM student WHERE id IN (SELECT id FROM student WHERE sex = 0)";
list = jdbcTemplate.queryForList(sql);
} catch (Exception e) {
e.getStackTrace();
}
return list;
}
结果：
highcharts java饼图
时间： 2024-10-12 03:21:03