highchat鑽取前後臺交互

 @RequestMapping("getScanRateByPiId")
    @ResponseBody
    public ResponseBase getScanRateByPiId(String piId, HttpServletRequest request) {
        ResponseBase responseBase;

        try {
            List<TbScanAmountrec> scanAmountrecList = new ArrayList<>();
            TbSystemAdmin user = (TbSystemAdmin) request.getSession().getAttribute(
                    "user");
            TbUserRole userRole = userRoleService.getRoleById(user.getSaRole());
            if (userRole != null && "經銷商".equals(userRole.getUrName())) {
                TbAgencyInfo agencyInfo = agencyService.getAgencyBySrId(user.getSaId());
                if (!StringUtils.isEmpty(agencyInfo.getAiArea())) {
                    TbScanAmountrec amountrec = scanAmountrecService.getScanAmountByPlaceNameAndType(piId, agencyInfo.getAiArea(), 3);
                    if (amountrec != null) {
                        //scanAmountrecList =  scanAmountrecService.getListByTypeAndPiId(piId, null, amountrec.getSaId());
                        scanAmountrecList.add(amountrec);
                    }
                } else if (!StringUtils.isEmpty(agencyInfo.getAiCity())) {
                    TbScanAmountrec amountrec = scanAmountrecService.getScanAmountByPlaceNameAndType(piId, agencyInfo.getAiCity(), 2);
                    if (amountrec != null) {
                        //scanAmountrecList =  scanAmountrecService.getListByTypeAndPiId(piId, null, amountrec.getSaId());
                        scanAmountrecList.add(amountrec);
                    }
                } else if (!StringUtils.isEmpty(agencyInfo.getAiProvince())) {
                    TbScanAmountrec amountrec = scanAmountrecService.getScanAmountByPlaceNameAndType(piId, agencyInfo.getAiProvince(),1);
                    if (amountrec != null) {
                        //scanAmountrecList =  scanAmountrecService.getListByTypeAndPiId(piId, null, amountrec.getSaId());
                        scanAmountrecList.add(amountrec);
                    }
                } else {
                    scanAmountrecList = scanAmountrecService.getListByTypeAndPiId(piId, 1, null);
                }
            } else {
                scanAmountrecList = scanAmountrecService.getListByTypeAndPiId(piId, 1, null);
            }

            Map<String, Object> ansMap = new HashMap<>();
            List<String> xAxis = new ArrayList<>();
            List<Double> data = new ArrayList<>();
            List<ChartData> provinceDataList = new ArrayList<>();
            List<ChartData> nextDataList = new ArrayList<>();
            for (TbScanAmountrec rec : scanAmountrecList) {
                //這是data
                ChartData chartData = new ChartData();
                chartData.setName(rec.getSaScanPlace().substring(rec.getSaScanPlace().indexOf("-") + 1));
                chartData.setY(100 * (double)rec.getSaTotalScanAmount() / (double)rec.getSaTotalAmount());
                chartData.setDrilldown(rec.getSaScanPlace());

                provinceDataList.add(chartData);

                //這是data外一層
                ChartData cityData = new ChartData();
                cityData.setName(rec.getSaScanPlace().substring(rec.getSaScanPlace().indexOf("-") + 1));
                cityData.setId(rec.getSaScanPlace());
                //這是data
                cityData.setData(new ArrayList());

                List<TbScanAmountrec> cityScanAmountrecList = scanAmountrecService.getListByTypeAndPiId(piId, null, rec.getSaId());
                for (TbScanAmountrec cityRec : cityScanAmountrecList) {
                    List<TbScanAmountrec> areaScanAmountrecList = scanAmountrecService.getListByTypeAndPiId(piId, null, cityRec.getSaId());
                    ChartData areaData = new ChartData();
                    areaData.setName(cityRec.getSaScanPlace().substring(cityRec.getSaScanPlace().indexOf("-") + 1));
                    areaData.setId(cityRec.getSaScanPlace());

                    List<ChartData> areaList = new ArrayList<>();
                    for (TbScanAmountrec areaRec : areaScanAmountrecList) {
                        if (areaRec.getSaTotalAmount() == 0) {
                            areaRec.setSaTotalAmount(1);
                        }
                        ChartData minData = new ChartData();
                        minData.setName(areaRec.getSaScanPlace().substring(areaRec.getSaScanPlace().indexOf("-") + 1));
                        minData.setY(100 * (double)areaRec.getSaTotalScanAmount() / (double)areaRec.getSaTotalAmount());
                        areaList.add(minData);
                    }
                    areaData.setData(areaList);
                    if (areaScanAmountrecList.size() > 0) {
                        nextDataList.add(areaData);
                    }

                    //城市-data
                    ChartData cityDataData = new ChartData();
                    cityDataData.setDrilldown(cityRec.getSaScanPlace());
                    cityDataData.setName(cityRec.getSaScanPlace().substring(cityRec.getSaScanPlace().indexOf("-") + 1));
                    if (cityRec.getSaTotalAmount() == 0) {
                        cityRec.setSaTotalAmount(1);
                    }
                    cityDataData.setY(100 * (double)cityRec.getSaTotalScanAmount() / (double)cityRec.getSaTotalAmount());

                    cityData.getData().add(cityDataData);
                }
                if (cityScanAmountrecList.size() > 0) {
                    nextDataList.add(cityData);
                }
            }
          /*  ansMap.put("xAxis",xAxis);
            ansMap.put("data", data);*/
           /* Collections.sort(provinceDataList,new Comparator<ChartData>(){
                @Override
                public int compare(ChartData arg0, ChartData arg1) {
                    return arg0.getY().compareTo(arg1.getY());
                }
            });*/
            ansMap.put("provinceDataList",provinceDataList);
            ansMap.put("nextDataList", nextDataList);

            responseBase = new ResponseBase(1, "", ansMap);
        } catch (Exception e) {
            responseBase = new ResponseBase(0, "");
            e.printStackTrace();
        }

        return responseBase;
    }

    @RequestMapping("getPbCodeScanRateByPiId")
    @ResponseBody
    public ResponseBase getPbCodeScanRateByPiId(String piId) {
        ResponseBase responseBase;
        try {
            List<TbScanAmountrec> scanAmountrecList = scanAmountrecService.getListByTypeAndPiId(piId, 10, null);

            Map<String, Object> ansMap = new HashMap<>();
            List<String> xAxis = new ArrayList<>();
            List<Double> data = new ArrayList<>();
            List<ChartData> provinceDataList = new ArrayList<>();
            for (TbScanAmountrec rec : scanAmountrecList) {
                //這是data
                ChartData chartData = new ChartData();
                chartData.setName(rec.getSaPbCode().substring(rec.getSaPbCode().indexOf("-") + 1));
                chartData.setY(100 * (double)rec.getSaTotalScanAmount() / (double)rec.getSaTotalAmount());
                chartData.setDrilldown(rec.getSaScanPlace());

                provinceDataList.add(chartData);
            }
            ansMap.put("provinceDataList",provinceDataList);

            responseBase = new ResponseBase(1, "", ansMap);
        } catch (Exception e) {
            responseBase = new ResponseBase(0, "");
            e.printStackTrace();
        }

        return responseBase;
    }

    @RequestMapping("getScanAreaByPiId")
    @ResponseBody
    public ResponseBase getScanAreaByPiId(String piId, HttpServletRequest request) {
        ResponseBase responseBase;
        try {
            List<TbScanAmountrec> scanAmountrecList = new ArrayList<>();
            TbSystemAdmin user = (TbSystemAdmin) request.getSession().getAttribute(
                    "user");
            TbUserRole userRole = userRoleService.getRoleById(user.getSaRole());
            if (userRole != null && "經銷商".equals(userRole.getUrName())) {
                TbAgencyInfo agencyInfo = agencyService.getAgencyBySrId(user.getSaId());
                if (!StringUtils.isEmpty(agencyInfo.getAiArea())) {
                    TbScanAmountrec amountrec = scanAmountrecService.getScanAmountByPlaceNameAndType(piId, agencyInfo.getAiArea(), 3);
                    if (amountrec != null) {
                        //scanAmountrecList =  scanAmountrecService.getListByTypeAndPiId(piId, null, amountrec.getSaId());
                        scanAmountrecList.add(amountrec);
                    }
                } else if (!StringUtils.isEmpty(agencyInfo.getAiCity())) {
                    TbScanAmountrec amountrec = scanAmountrecService.getScanAmountByPlaceNameAndType(piId, agencyInfo.getAiCity(), 2);
                    if (amountrec != null) {
                        //scanAmountrecList =  scanAmountrecService.getListByTypeAndPiId(piId, null, amountrec.getSaId());
                        scanAmountrecList.add(amountrec);
                    }
                } else if (!StringUtils.isEmpty(agencyInfo.getAiProvince())) {
                    TbScanAmountrec amountrec = scanAmountrecService.getScanAmountByPlaceNameAndType(piId, agencyInfo.getAiProvince(),1);
                    if (amountrec != null) {
                        //scanAmountrecList =  scanAmountrecService.getListByTypeAndPiId(piId, null, amountrec.getSaId());
                        scanAmountrecList.add(amountrec);
                    }
                } else {
                    scanAmountrecList = scanAmountrecService.getListByTypeAndPiId(piId, 1, null);
                }
            } else {
                scanAmountrecList = scanAmountrecService.getListByTypeAndPiId(piId, 1, null);
            }

            Map<String, Object> ansMap = new HashMap<>();
            List<String> xAxis = new ArrayList<>();
            List<Double> data = new ArrayList<>();
            List<ChartData> provinceDataList = new ArrayList<>();
            List<ChartData> nextDataList = new ArrayList<>();
            for (TbScanAmountrec rec : scanAmountrecList) {
                //這是data
                ChartData chartData = new ChartData();
                chartData.setName(rec.getSaScanPlace().substring(rec.getSaScanPlace().indexOf("-") + 1));
                chartData.setY((double)rec.getSaTotalScanAmount());
                chartData.setDrilldown(rec.getSaScanPlace());

                provinceDataList.add(chartData);

                //這是data外一層
                ChartData cityData = new ChartData();
                cityData.setName(rec.getSaScanPlace().substring(rec.getSaScanPlace().indexOf("-") + 1));
                cityData.setId(rec.getSaScanPlace());
                //這是data
                cityData.setData(new ArrayList());

                List<TbScanAmountrec> cityScanAmountrecList = scanAmountrecService.getListByTypeAndPiId(piId, null, rec.getSaId());
                for (TbScanAmountrec cityRec : cityScanAmountrecList) {
                    List<TbScanAmountrec> areaScanAmountrecList = scanAmountrecService.getListByTypeAndPiId(piId, null, cityRec.getSaId());
                    ChartData areaData = new ChartData();
                    areaData.setName(cityRec.getSaScanPlace().substring(cityRec.getSaScanPlace().indexOf("-") + 1));
                    areaData.setId(cityRec.getSaScanPlace());

                    List<ChartData> areaList = new ArrayList<>();
                    for (TbScanAmountrec areaRec : areaScanAmountrecList) {
                        if (areaRec.getSaTotalAmount() == 0) {
                            areaRec.setSaTotalAmount(1);
                        }
                        ChartData minData = new ChartData();
                        minData.setName(areaRec.getSaScanPlace().substring(areaRec.getSaScanPlace().indexOf("-") + 1));
                        minData.setY((double)areaRec.getSaTotalScanAmount());
                        areaList.add(minData);
                    }
                    areaData.setData(areaList);
                    if (areaScanAmountrecList.size() > 0) {
                        nextDataList.add(areaData);
                    }

                    //城市-data
                    ChartData cityDataData = new ChartData();
                    cityDataData.setDrilldown(cityRec.getSaScanPlace());
                    cityDataData.setName(cityRec.getSaScanPlace().substring(cityRec.getSaScanPlace().indexOf("-") + 1));
                    if (cityRec.getSaTotalAmount() == 0) {
                        cityRec.setSaTotalAmount(1);
                    }
                    cityDataData.setY((double)cityRec.getSaTotalScanAmount());

                    cityData.getData().add(cityDataData);
                }
                if (cityScanAmountrecList.size() > 0) {
                    nextDataList.add(cityData);
                }
            }
          /*  ansMap.put("xAxis",xAxis);
            ansMap.put("data", data);*/
            /*Collections.sort(provinceDataList,new Comparator<ChartData>(){
                @Override
                public int compare(ChartData arg0, ChartData arg1) {
                    return arg0.getY().compareTo(arg1.getY());
                }
            });*/
            ansMap.put("provinceDataList",provinceDataList);
            ansMap.put("nextDataList", nextDataList);

            responseBase = new ResponseBase(1, "", ansMap);
        } catch (Exception e) {
            responseBase = new ResponseBase(0, "");
            e.printStackTrace();
        }

        return responseBase;
    }

封裝：

public class ChartData {
    private String name;
    private Double y;
    private String drilldown;
    private String id;
    private List data;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Double getY() {
        return y;
    }

    public void setY(Double y) {
        this.y = y;
    }

    public String getDrilldown() {
        return drilldown;
    }

    public void setDrilldown(String drilldown) {
        this.drilldown = drilldown;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public List getData() {
        return data;
    }

    public void setData(List data) {
        this.data = data;
    }
}

頁面：鑽取需要引入drilldown.js這個文件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!doctype html>
<html class="no-js" lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="${ctx}/content/css/reset.css" />
    <link rel="stylesheet" href="${ctx }/content/css/right.css" />
    <link rel="stylesheet" href="${ctx }/content/css/info.css" />
    <script type="text/javascript" src="${ctx}/content/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="${ctx}/content/js/jqeury_extend.js"></script>
    <script type="text/javascript" src="${ctx }/content/layer/layer.js"></script>

    <script src="${ctx }/content/highcharts/highcharts.js"></script>
    <script src="${ctx }/content/highcharts/modules/drilldown.js"></script>
</head>
<body  style="overflow-x: hidden">
<div class="info_main">
    <div style="margin-top: 10px;">
        <form id="query">
            產品名稱：
            <select id="piId" class="shuru"  maxlength="32" style="width:200px;">
                <option value="">未選擇</option>
                <c:forEach items="${productList }" var="sub" >
                    <option value="${sub.piId }">${sub.piName}</option>
                </c:forEach>
            </select>
            圖表類型
            <select id="type" class="shuru"  maxlength="32" style="width:200px;">
                <option value="column">未選擇</option>
                <option value="column">柱狀圖</option>
                <option value="line">折線圖</option>
                <option value="pie">餅圖</option>
            </select>
            <a style="margin-left:5px;" onclick="LoadSerie_Ajax()" class="btn_query">查詢</a>
        </form>
    </div>
    <div style="width: 100%;margin-top: 10px;">
        <div id="container" style="min-width:400px;width:1200px;height:400px;"></div>
        <div id="container2" style="min-width:400px;width:1200px;height:400px;"></div>
    </div>

</div>
</body >
<script type="text/javascript">
    //定義一個Highcharts的變量，初始值爲null
    var oChart = null;

    var oOptions = {
        chart: {
            type: 'column',
            renderTo: 'container'
        },
        title: {
            text: '地區掃碼率分析圖表'
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
                text: '掃碼率百分比（%）'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}%'
                }
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
        },
        series: [{
            name: '掃碼率百分比（%）',
            colorByPoint: true,
            data: []
        }],
        drilldown: {
            series: []
        },
        exporting:{
            enabled:false
        },
        credits: {
            enabled: false
        }
    }

    var oChart2 = null;

    var oOptions2 = {
        chart: {
            type: 'column',
            renderTo: 'container2'
        },
        title: {
            text: '批次掃碼率分析圖表'
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
                text: '掃碼率百分比（%）'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}%'
                }
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
        },
        series: [{
            name: '掃碼率百分比（%）',
            colorByPoint: true,
            data: []
        }],
        drilldown: {
            series: []
        },
        exporting:{
            enabled:false
        },
        credits: {
            enabled: false
        }
    }
    $(document).ready(function(){
        oChart = new Highcharts.Chart(oOptions);
        oChart2 = new Highcharts.Chart(oOptions2);
        //異步動態加載數據列
       // LoadSerie_Ajax();
    });

    //異步讀取數據並加載到圖表
    function LoadSerie_Ajax() {
        oChart.showLoading("正在加載數據...");
        $.ajax({
            url : '${ctx }/data/getScanRateByPiId.do?piId='+$("#piId").val(),
            type : 'POST',
            dataType : 'json',
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success : function(rntData){
                console.log(rntData.data);

                if (rntData.code == 1) {
                    var oSeries = {
                        name: "掃碼率",
                        data: rntData.data.provinceDataList,
                        drilldown: true

                    };


                    oOptions.chart.type = $("#type").val();

                    oOptions = {

                        //設置圖表關聯顯示塊和圖形樣式
                        chart: {
                            renderTo: 'container',  //設置顯示的頁面塊
                            //type:'line'                //設置顯示的方式
                            type: $("#type").val(),
                            drilldown: {
                                series: []
                            }
                        },

                        //圖標標題
                        title: {
                            text: '地區掃碼率分析圖表'
                            //text: null, //設置null則不顯示標題
                        },

                        //x軸
                        xAxis: {
                            type: 'category'
                        },

                        //y軸
                        yAxis: {
                            title: { text: '掃碼率百分比（%）' }
                        },
                        series : [ {
                            name: "掃碼率",
                            data: rntData.data.provinceDataList
                        } ],

                        drilldown: {
                            series: rntData.data.nextDataList
                        },
                        exporting:{
                            enabled:false
                        },
                        credits: {
                            enabled: false
                        },
                        tooltip: {
                            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
                        },
                    };
                    oChart = new Highcharts.Chart(oOptions);
                } else {
                    oChart = new Highcharts.Chart(oOptions);
                    oChart.setTitle("數據讀取失敗");
                }

            }
        });
        oChart.hideLoading();


        oChart2.showLoading("正在加載數據...");
        $.ajax({
            url : '${ctx }/data/getPbCodeScanRateByPiId.do?piId='+$("#piId").val(),
            type : 'POST',
            dataType : 'json',
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success : function(rntData){
                console.log(rntData.data);

                if (rntData.code == 1) {

                    oOptions2 = {

                        //設置圖表關聯顯示塊和圖形樣式
                        chart: {
                            renderTo: 'container2',  //設置顯示的頁面塊
                            //type:'line'                //設置顯示的方式
                            type: $("#type").val(),
                            drilldown: {
                                series: []
                            }
                        },

                        //圖標標題
                        title: {
                            text: '批次掃碼率分析圖表'
                            //text: null, //設置null則不顯示標題
                        },

                        //x軸
                        xAxis: {
                            type: 'category'
                        },

                        //y軸
                        yAxis: {
                            title: { text: '掃碼率百分比（%）' }
                        },
                        series : [ {
                            name: "批次掃碼率",
                            data: rntData.data.provinceDataList
                        } ],
                        exporting:{
                            enabled:false
                        },
                        credits: {
                            enabled: false
                        },
                        tooltip: {
                            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
                        },
                    };
                    oChart2 = new Highcharts.Chart(oOptions2);
                } else {
                    oChart2 = new Highcharts.Chart(oOptions2);
                    oChart2.setTitle("數據讀取失敗");
                }

            }
        });
        oChart2.hideLoading();
    }
</script>
</html>

獲得的json數據形如：

{
    "code":1,
    "msg":"", 
    "data":
    {
        "nextDataList":
        [{
            "name": "河南省",
            "y": null,
            "drilldown": null,
            "id": "河南省",
            "data": [{"name": "河南省下面的市", "y": 2.0, "drilldown": "河南省下面的市", "id": null, "data": null}]
        }, {
            "name": "杭州市",
            "y": null,
            "drilldown": null,
            "id": "杭州市",
            "data": [{"name": "西湖區", "y": 2.0, "drilldown": null, "id": null, "data": null}, {
                "name": "上城區",
                "y": 2.0,
                "drilldown": null,
                "id": null,
                "data": null
            }, {"name": "下城區", "y": 2.0, "drilldown": null, "id": null, "data": null}, {
                "name": "蕭山區",
                "y": 2.0,
                "drilldown": null,
                "id": null,
                "data": null
            }, {"name": "餘杭區", "y": 2.0, "drilldown": null, "id": null, "data": null}, {
                "name": "濱江區",
                "y": 3.0,
                "drilldown": null,
                "id": null,
                "data": null
            }, {"name": "拱墅區", "y": 1.0, "drilldown": null, "id": null, "data": null}]
        }, {
            "name": "浙江省",
            "y": null,
            "drilldown": null,
            "id": "浙江省",
            "data": [{"name": "嘉興市", "y": 1.0, "drilldown": "嘉興市", "id": null, "data": null}, {
                "name": "杭州市",
                "y": 1.0,
                "drilldown": "杭州市",
                "id": null,
                "data": null
            }]
        }], 
            "provinceDataList":
        [{"name": "江蘇省", "y": 2.0, "drilldown": "江蘇省", "id": null, "data": null}, {
            "name": "河南省",
            "y": 2.0,
            "drilldown": "河南省",
            "id": null,
            "data": null
        }, {"name": "浙江省", "y": 2.0, "drilldown": "浙江省", "id": null, "data": null}]
    }
}