首页 > 代码库 > highcharts java饼图

highcharts java饼图

2024-07-14 02:54:45   216人阅读

自学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="http://www.mamicode.com/">
    <title>饼图</title>
    <script type="text/javascript" src=http://www.mamicode.com/‘#/‘" /js/jquery-1.8.2.min.js"></script>
	<script src=http://www.mamicode.com/‘#/‘" /js/Highcharts/js/highcharts.js"></script>
    <script src=http://www.mamicode.com/‘#/‘" /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=http://www.mamicode.com/{"/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;
	}

结果：

wKiom1PSCLaCxcgxAADoLTE6NmE949.jpg

本文出自 “骑猴上树” 博客，请务必保留此出处http://qihoushangshu.blog.51cto.com/7872138/1530106


联系
我们