HighChars3D饼图（从后台获取数据）

实现效果

highchars官方文档：https://api.highcharts.com.cn/highcharts

1.引入js

<script src="/plugin/Highcharts/code/highcharts.js"></script>
<script src="/plugin/Highcharts/code/highcharts-3d.js"></script>
<script src="/plugin/Highcharts/code/modules/exporting.js"></script>
<script src="/plugin/Highcharts/code/modules/export-data.js"></script>

2.html

<div id="container" ondblclick="close3D()" style="margin-top: 6%;margin-left: 20%;height: 420px;position: absolute;z-index: 900"></div>

3.js代码

'open3D':function () {
    var params = $('#searchForm').serializeObject();
    // console.debug(params);
    $('#container').show();

    // 获取饼图数据
    $.post('/purchasebillitem/3D',params,function (data) {
        // 3D统计图
        Highcharts.chart('container', {
            exporting: {
                enabled:false
            },
            credits: {
                enabled: false     //不显示LOGO
            },
            chart: {
                type: 'pie',
                // 设置背景色与透明度
                backgroundColor: 'rgba(0,0,0,0.5)',
                options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0
                }
            },
            title: {
                text: 'Browser market shares at a specific website, 2014'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    depth: 35,
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}',
                        style: {
                            color: 'white'
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: '总额占比：',
                data: data
            }]
        });
    })
}

4.从后台获取饼图数据

• query层接收查询条件

// 获取分组字符串（用作jpql条件拼接）
public String groupBy(){
    return this.groupSelect == 0 ?  "o.purchasebill.supplier.name" :  this.groupSelect == 1 ? "o.purchasebill.buyer.username" :
            this.groupSelect == 2 ? "o.product.producttype.name" : "MONTH(o.purchasebill.vdate)";
}
// jpql条件拼接
public String getWhere(){
    // StringBuffer性能高于String（性能高，线程不安全）
    StringBuffer jpql = new StringBuffer("");
    if (beginDate != null){
        // jpql.append(" and o.purchasebill.vdate >= " + getBeginDate());
        jpql.append(" and o.purchasebill.vdate >= ?");
        list.add(beginDate);
    }
    if (endDate != null){
        Date tempDate = DateUtils.addDays(endDate,2);
        // jpql.append(" and o.purchasebill.vdate < " + getEndDate());
        jpql.append(" and o.purchasebill.vdate < ?");
        list.add(endDate);
    }
    if (status != null){
        // jpql.append(" and o.purchasebill.status = " + status);
        jpql.append(" and o.purchasebill.status = ?");
        list.add(status);
    }
    return jpql.toString().replaceFirst("and", "where");
}

• service层根据条件进行查询

@Override
public List<Map<String, BigDecimal>> get3DData(PurchasebillitemQuery query) {
    // 准备Map容器
    List<Map<String, BigDecimal>> list = new ArrayList<>();
    // 查询jpal
    String jpql = "select " + query.groupBy() + ",sum(o.amount) from Purchasebillitem o " + query.getWhere() + " group by " + query.groupBy();
    // String jpql = "select o.purchasebill.supplier.name,sum(o.amount) from cn.meco.aisell.domain.Purchasebillitem o  where o.purchasebill.vdate <= o.purchasebill.inputtime group by o.purchasebill.supplier.name";
    List<Object> objects = query.getList();
    // jpql查出来的集合里都是object数组
    List<Object[]> byJpql = purchasebillitemRepository.findByJpql(jpql, objects.toArray());
    for (Object[] o : byJpql) {
        Map map = new HashMap();
        // 设置map值
        map.put("name", o[0]);
        map.put("y", o[1]);
        // 将map放入容器
        list.add(map);
    }
    return list;
}

• controller层接收参数返回数据

@RequestMapping("/3D")
@ResponseBody
public List<Map<String, BigDecimal>> get3DData(PurchasebillitemQuery query){
    return purchasebillitemService.get3DData(query);
}

 

转载于:https://my.oschina.net/u/4107179/blog/3030567