前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >在Java中使用Highcharts+Ajax+Json生成动态饼图

在Java中使用Highcharts+Ajax+Json生成动态饼图

作者头像
geekfly
发布2022-05-06 19:32:27
9930
发布2022-05-06 19:32:27
举报
文章被收录于专栏:geekfly

1.由于HighCharts运行于JQuery,所以需要引入jQuery。 jquery-1.8.3.min HighCharts核心js文件 highcharts.js 导出功能需要引入的js exporting.js 完整文件 Highcharts-4.2.5 2.在jsp页面引入如上文件

代码语言:javascript
复制
   	<script type="text/javascript">
		var chart;
$(function () {
	
	$(document).ready(function() {
        chart = new Highcharts.Chart({
	        chart: {
	        	renderTo: 'container',
	            plotBackgroundColor: null,
	            plotBorderWidth: null,
	            plotShadow: false
	        },title: {
	        	text: '教师绩效分析图'
	        },
	        tooltip: {
	    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	        },
	        plotOptions: {
	            pie: {
	                allowPointSelect: true,
	                cursor: 'pointer',
	                dataLabels: {
	                    enabled: true,
	                    color: '#000000',
	                    connectorColor: '#000000',
	                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
	                },
                    showInLegend: true
	            }
	        },
	        series: [{
	            type: 'pie',
	            name: '所占比例',
	        }]
	    });
	});
	  //调用查询,加载数据
	  chaxun();
});
	function chaxun(){
		var arr = [];
		var param = $('#groupS').val();
		   if($('#departmentS').val()!="全部"){
			   param += "&department="+$('#departmentS').val();
		   }
		   if($('#typeS').val()!="全部"){
			   param += "&type="+$('#typeS').val();
		   }
		$.ajax({
		    type:'get',
		    url:'/SX2/WorkloadAnalysis/getData?group='+param,//请求数据的地址
		    beforeSend:function(XMLHttpRequest){ 
				   $('#loading').show();
				   $('#contentDIV').hide();
		           $('#loading').html("<img src='<%=path%>/image/loading.gif' />"); 
		       }, 
			 success: function(data){
				$('#contentDIV').show();
				$('#loading').hide();
				
		    	$(data.data).each(function(index,item){
		    		arr.push([item.name,item.num]);
		    	});
		       chart.series[0].setData(arr);//数据填充到highcharts上面 
		    },
		    error:function(e){
		    	alert("不好意思,请要访问的图标跑到火星去了。。。。");
		    } 
		});
	};
		</script>

4.Controller代码

代码语言:javascript
复制
	@RequestMapping("getData")
	@ResponseBody
	public Map<String,Object> getData(Integer department,Integer group,String type){
		Map<String,Object> map = new HashMap<String,Object>();
		map.put("title", "教师绩效考核结果分析");
		HashMap<String,Object> param = new HashMap<>();
		param.put("department", department);
		param.put("group", group);
		param.put("type", type);
		List<Map<String,Object>> list = ws.selectWorkloadAnalysis(param);
		map.put("data",list);
		return map;
	}

返回数据样例

代码语言:javascript
复制
{"title":"教师绩效考核结果分析","data":[{"num":0,"name":"0-20分"},{"num":1,"name":"21-40分"},{"num":0,"name":"41-60分"},{"num":0,"name":"61-80分"},{"num":0,"name":"81-100分"}]}

4.请求Controller,网页显示如下:

这里写图片描述
这里写图片描述
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-05-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档