饼状图向下钻取：自己实例，ajax后台获取数据

最新推荐文章于 2024-03-06 18:31:30 发布

AtomDCM

最新推荐文章于 2024-03-06 18:31:30 发布

阅读量1.1k

点赞数

html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="viewport" content="width=device-width ,initial-scale=1">
<link rel="icon" href="https://static.jinashukeji.com/highcharts/images/favicon.icon">
<script type="text/javascript" src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="${base}/js/hchart/highcharts.js" charset="utf-8"></script>
<script type="text/javascript" src="${base}/js/hchart/exporting.js" charset="utf-8"></script>
<script type="text/javascript" src="${base}/js/hchart/data.js" charset="utf-8"></script>
<script type="text/javascript" src="https://img.hcharts.cn/highcharts/modules/drilldown.js" charset="utf-8"></script>
<script type="text/javascript" src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js" charset="utf-8"></script>
<script type="text/javascript" src="${base}/js/hchart/sand-signika.js" charset="utf-8"></script>
<script type="text/javascript" src="${base}/js/list/todayPie.js" charset="utf-8"></script>
</head>
<body>
<div id="container" style="min-width:310px;max-width:600px; height:500px;margin:0 auto;"> </div>

</body>

</html>

js:

$(function () {
    $.ajax({
        type: "POST",
        url: "../reservations/pie",
        //基础饼状图
        success: function (data) {
           data=eval('('+data+')');
           var allString= [];
           allString =data.split("-");
           var regions={};
           var offices={};
           regions=JSON.parse(allString[0]);
           offices=JSON.parse(allString[1]);

           var regsData = [],
           drilldownSeries = [];
            $(function () {
               for(var key in regions ){
                   var b=[];
                   var i= 0;
                   for(var re in offices){
                       if(offices[re].reName==regions[key].name){
                           b[i]=[offices[re].name,offices[re].y];
                           i++;
                       }
                   }
                   regsData.push({
                        name: regions[key].name,
                        y: regions[key].y,
                        drilldown: b.length>0 ? regions[key].name:null
                    });

                   drilldownSeries.push({
                        name:regions[key].name,
                        id: regions[key].name,
                        data: b.length>0 ? b:null //该版本全部，数组的数组
                    });
               }
               var myDate = new Date();
               var today=myDate.getFullYear()+"年"+myDate.getMonth()+"月"+myDate.getDate()+"日";
                // 创建图例
                $('#container').highcharts({
                    chart: {
                        type: 'pie'
                    },
                    title: {
                        text: today+'各区域车检预约人数'
                    },
                    /*subtitle: {
                        text: '单击每个浏览器品牌不同版本的具体信息，数据来源: netmarketshare.com.'
                    },*/
                    plotOptions: {
                        series: {
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}: {point.y}</b>（人）预约车检<br/>'
                            }
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b>（人）预约车检<br/>'
                    },
                    series: [{
                        name: '今日预约：',
                        colorByPoint: true,
                        data: regsData
                    }],
                    drilldown: {
                        series: drilldownSeries
                    }
                });
            });
        }
    });

});

java:

import com.alibaba.fastjson.JSON;

import com.jyxin.vehicle.platform.admin.vo.ReservationPieVo;

    /**
   * 统计报表之表之饼状图
   *
   */
    @RequestMapping(value = "/pie",method = RequestMethod.POST)
    @ResponseBody
    public Object pie(HttpServletRequest request) {
        //根据数据库查询柱状图中所使用到的数据并封装对象
        List<Object[]> reservations = this.reservationService.findByRegion();
        List<ReservationPieVo> reData = new ArrayList<ReservationPieVo>();
        List<ReservationPieVo> offData = new ArrayList<ReservationPieVo>();
        HashMap<String, Object> map = new HashMap<>();
        int sum =0;
        for (Object[] objects : reservations) {
           System.out.println(objects[1]);
           int y=Integer.parseInt(objects[1].toString());
           sum+=y;
           //map.put(objects[0].toString(), y);//区域和对应的预约数
           reData.add(new ReservationPieVo(objects[0].toString(), y));
       }
        List<Object[]> reservationsOff = this.reservationService.findByOffice();
        for (Object[] objects : reservationsOff) {
           System.out.println(objects[0]);
           int y=Integer.parseInt(objects[1].toString());
           offData.add(new ReservationPieVo(objects[0].toString(), y,objects[2].toString()));
       }
        //转化为json并传到前台（即js）
        String json1 = JSON.toJSONString(reData);
        String json2 = JSON.toJSONString(offData);

        return json1+"-"+json2;
    }

封装的实体类：

package com.jyxin.vehicle.platform.admin.vo;

import java.io.Serializable;

public class ReservationPieVo implements Serializable{
   private static final long serialVersionUID = 7877814195365848373L;
   public String name ;//区域名称
   public int y;//区域站预约数的比例
   public int sum;//今日总预约数
   public String reName;


   public ReservationPieVo(String name, int y) {
       super();
       this.name = name;
       this.y = y;
   }


   public ReservationPieVo( String name, int y,String reName) {
       super();
       this.name = name;
       this.reName = reName;
       this.y = y;
   }

   public String getName() {
       return name;
   }
   public void setName(String name) {
       this.name = name;
   }
   public int getY() {
       return y;
   }
   public void setY(int y) {
       this.y = y;
   }
   public int getSum() {
       return sum;
   }
   public void setSum(int sum) {
       this.sum = sum;
   }

   public String getReName() {
       return reName;
   }

   public void setReName(String reName) {
       this.reName = reName;
   }




}

AtomDCM

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
饼状图向下钻取：自己实例，ajax后台获取数据

html: js:$(function () { $.ajax({ type: "POST", url: "../reservations/pie", //基础饼状图 success: function (dat
复制链接

扫一扫