用amcharts动态生成饼图

最新推荐文章于 2024-04-26 09:45:06 发布

雪飘雪融

最新推荐文章于 2024-04-26 09:45:06 发布

阅读量4.1k

点赞数

分类专栏： amcharts ajax spring

本文链接：https://blog.csdn.net/qq_22498277/article/details/52516537

版权

spring 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

ajax

4 篇文章 0 订阅

订阅专栏

amcharts

3 篇文章 0 订阅

订阅专栏

客户端：发送ajax请求，获取图表数据

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title>
        <link rel="stylesheet" href="${pageContext.request.contextPath }/charts/style.css" type="text/css">
        <script src="${pageContext.request.contextPath }/charts/amcharts.js" type="text/javascript"></script>
        <script src="${pageContext.request.contextPath }/js/jquery.min.js" type="text/javascript"></script>
        <script src="${pageContext.request.contextPath }/charts/pie.js" type="text/javascript"></script>

        <script>
	        	var chartData = [];
		        var chart;
	            AmCharts.ready(function () {
	                // PIE CHART
	                chart = new AmCharts.AmPieChart();
	                chart.dataProvider = chartData;
	                chart.titleField = "factory_name";//横坐标
	                chart.valueField = "num";//纵坐标
	                chart.outlineColor = "#FFFFFF";//最外面的线的颜色
	                chart.outlineAlpha = 0.8;
	                chart.outlineThickness = 2;

	                // WRITE
	                chart.write("chartdiv");
	           });
				function loadStringData() {//发送ajax请求获取数据
					$.ajax({
					   type: "POST",
					   url: "/jk/run/factorysale/factorysale.action",
					   cache: false,
					   success: function(msg){
						 chart.dataProvider = msg;//把请求过来的数据给  dataProvider
						 chart.validateNow();  
						 chart.validateData();  //刷新图
					   },
					});
				}
  				setTimeout("loadStringData()", 100);//过100毫秒就发送请求给服务器获取图的数据
        </script>
    </head>

    <body>
        <div id="chartdiv" style="width: 100%; height: 400px;"></div>
    </body>

</html>

服务器端：查询数据库，把查询结果拼成字符串再用json格式返回

//厂家销售情况饼状图
	@ResponseBody 
	@RequestMapping(value="/run/factorysale/factorysale.action", method=RequestMethod.POST, produces="application/json;charset=UTF-8")
	 public String factorysale(){
		String sql = "SELECT f.factory_name,cp.num FROM(SELECT factory_id,factory_name FROM factory_c) f RIGHT JOIN "
		+ "(SELECT factory_id, COUNT(*) AS num FROM contract_product_c GROUP BY factory_id) cp ON f.factory_id=cp.factory_id";
		List<Map<String, Object>> dataList = super.getJdbcTemplate().queryForList(sql);
		StringBuffer sb = new StringBuffer("[");
		for(Map map: dataList) {
			sb.append(",").append("{\"factory_name\":").append("\""+map.get("factory_name")+"\"");
			sb.append(",").append("\"num\":").append("\""+map.get("num")+"\"").append("}");
		}
		sb.append("]");
		System.out.println(sb.toString().replaceFirst(",", ""));
		return sb.toString().replaceFirst(",", "");
	}

结果：