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

原创 2016年05月31日 22:03:44

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")
    @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;
    }

返回数据样例

{"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实例(三) - Hello Highcharts (后台Java传递数据)

上一回,我们使用官方的介绍,完成了Highcharts的入门
  • jolingogo
  • jolingogo
  • 2014年10月13日 16:06
  • 5760

Java与Highcharts实例(五) - 切换主题

Highcharts提供了很多中主题 像这样:
  • jolingogo
  • jolingogo
  • 2014年10月14日 16:43
  • 3067

Java与Highcharts实例(四) - Hello Highcharts (后台Java传递数据) - 改造实体

上一回,我们实现了从后台传递数据,在图表中展示,而图表的大部分配置都实在用...
  • jolingogo
  • jolingogo
  • 2014年10月14日 09:24
  • 3622

在Java中Highcharts前后台数据交互传输

最近在项目中要添加一个Highcharts数据图表显示。看过官方的Ajax交互事例,可惜好像使用的是PHP语言,而且没有显示后台的代码。百度查看了很多前辈们的事例,发现没一样是我所要的效果。。。最后还...
  • qq348843576
  • qq348843576
  • 2015年06月15日 14:30
  • 2908

java利用插件echarts动态制作饼图

页面,代码和结果
  • m0_37934074
  • m0_37934074
  • 2017年08月26日 16:13
  • 515

(五)、利用HighCharts 显示饼图

利用HightCharts显示饼图,主要有以下几个主要注意点: 1、百分比格式,精确到小数点几位: Highcharts.numberFormat(this.percentage, 2) ...
  • taomanman
  • taomanman
  • 2011年11月07日 09:43
  • 17358

hightcharts json数据传递(特别是饼图)

琢磨了一整天,终于把hightcharts的数据传递给搞完了,首先我想提醒,已经做了但是遇到问题的同学必须要注意一点,关键字一定要一一对应,不然显示不出来,比如说饼图的数据,不是data而是y ...
  • AC_great
  • AC_great
  • 2015年05月28日 19:05
  • 1724

新手学HighCharts(二)----对比柱状图的动态加载

highcharts数据显示形式 后台 B层实现层 Controller层 前台 JSP JavaScript    上一篇文章 新手学HighCharts(一)—-基本使用 中介绍了highChar...
  • u010853701
  • u010853701
  • 2016年01月09日 11:11
  • 4471

新手学HighCharts(一)----基本使用

HighCharts简介    最近做的项目需要用到数据分析,图表显示,之前做项目的时候用到过highcharts,不过也只是简单的会用而已,然后再网上查了查highcharts的优点: High...
  • u010853701
  • u010853701
  • 2015年12月30日 17:38
  • 2149

highcharts动态加载json数据

首先创建一个container js函数 $(function() { var x = [];//X轴 var y = [];//Y轴 var xtext = [];/...
  • lixinhui199
  • lixinhui199
  • 2016年02月23日 16:38
  • 1264
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在Java中使用Highcharts+Ajax+Json生成动态饼图
举报原因:
原因补充:

(最多只允许输入30个字)