本文主要是介绍在Java中使用Highcharts+Ajax+Json生成动态饼图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1.由于HighCharts运行于JQuery，所以需要引入jQuery。 jquery-1.8.3.min
HighCharts核心js文件 highcharts.js
导出功能需要引入的js exporting.js
完整文件 Highcharts-4.2.5
2.在jsp页面引入如上文件
<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代码
@RequestMapping("getData")@ResponseBodypublic 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;}
返回数据样例
{"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，网页显示如下：
这篇关于在Java中使用Highcharts+Ajax+Json生成动态饼图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
