遵照highcharts+easui+java生成饼图

序言:第二回接触饼图,刚早先并未思路,前边在网上找了弹指间对待了眨眼间间,发现用highcharts插件去生成图表特别简单,用起来依旧12分简单的,只须求后台重临相应的多寡前台用json接收一下,就足以圆满的兑现了。

壹、先来个实体体现,让大家看看效果

图片 1

(效果依然美美的)

二、要兑现那些作用首先要去highcharts官网去下载你本身要求的图片

归纳的介绍下Highcharts,Highcharts是贰个丰裕流行,界面美观的纯Javascript图表库。它根本不外乎多个部分:Highcharts和Highstock。Highcharts可以为您的网址或Web应用程序提供直观,互动式的图形。最近扶助线,样条,面积,areaspline,柱形图,条形图,饼图和散点图类型。Highstock能够为你方便地树立股票或相似的岁月轴图表。它归纳先进的导航选项,预设的日期范围,日期采纳器,滚动和平移等等。(上面是highcharts官网地址和demo)

HIghChartS官网:http://www.highcharts.com/

HighCharts Demo:http://www.highcharts.com/demo/

图片 2

二.一引进相应的js文件才能落到实处页面效果

鉴于自家在Web开发框架中,首要使用了MVC+EasyUI的情势,因饱含的公文如下所示。(每一种图表须要引得文件官网的demo里面都有)

图片 3

<script type="text/javascript" src="<%=basePath%>/view/report/highcharts.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/grid.js"></script>
<script type="text/javascript" src="<%=basePath%>/view/report/exporting.js"></script>
 <script type="text/javascript" src="/view/report/jquery.min.js"></script>

 

 

 

<script type="text/javascript" src="<%=basePath%>/view/report/jquery.min.js"></script>
@*图表JS文件应用*@
<script type="text/javascript" src="<%=basePath%>/view/report/highcharts.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/grid.js"></script>
<script type="text/javascript" src="<%=basePath%>/view/report/exporting.js"></script>

 

 三、图表的js代码

先是是官网下载下来的图形代码

$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '2014 某网站上各个浏览器的访问量占比'
        },
        tooltip: {
            headerFormat: '{series.name}<br>',
            pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: '浏览器访问量占比',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['其他',   0.7]
            ]
        }]
    });
});

变更后的体裁,只须求把data换到动态的数组用json来选用

 var chart2=  Highcharts.chart('container1', {
            chart: {
                margin: [0, 0, 0, 0],
                width:300,
                padding:[0, 0, 0, 0],
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '各航站异常行李数量'
            },
           /* tooltip: {
                headerFormat: '{series.name}<br>',
                pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
            },*/
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: '异常行李量',
                data: [ ]
            }]
        });

 

 我的ajax请求

 function getPieJson(){
          var data1 = [];
          $.ajax({
                type : "POST", // 提交方式
                url :servicefulPath + '/irregularBagReportTotal/pieChart',
                success : function(result){
                   var json = result.data;        
                   for ( var key in json) {
                    //通过遍历对象属性的方法,遍历键值对,获得key,然后通过 对象[key]获得对应的值
                       if (json.hasOwnProperty(key)) {
                        data1.push([key, json[key]]);
                    }
                   }
                   chart2.series[0].setData(data1);
             }
          });
      }

4,后台代码格式

(阐明:各类的后台框架和准星都不平等,最关键的是回去3个map数据到前台就足以了)

    //饼图
    public Map<String, Object> pieChart(){
        Map<String, Object> map = new HashMap<String, Object>();
        StringBuffer sql = new StringBuffer("SELECT SUM (E .LOSE) AS lose,SUM (E .MISSHIPMENT) AS miss,");
        sql.append(" SUM (E .LEAKAGE_LUCK) AS leak,SUM (E . LESS) AS LESS,SUM (E .DAMAGED) AS damaged");
        sql.append(" FROM E_ABNOM_BAGGA_TRAN E");
        Query query = entityManager.createNativeQuery(sql.toString());//执行sql语句
        Object[] o =  (Object[])query.getResultList().get(0);
        IrregularBagReport count = new IrregularBagReport();
        //丢失
        if (o[0] == null) {
            count.setLost(BigDecimal.ZERO);
        } else {
            count.setLost((BigDecimal) o[0]);
        }
        //错运
        if (o[1] == null) {
            count.setMisshipMent(BigDecimal.ZERO);
        } else {
            count.setMisshipMent((BigDecimal) o[1]);
        }
        //漏运
        if (o[2] == null) {
            count.setLeakageLuck(BigDecimal.ZERO);
        } else {
            count.setLeakageLuck((BigDecimal) o[2]);
        }
        //少收
        if (o[3] == null) {
            count.setLess(BigDecimal.ZERO);
        } else{
            count.setLess( (BigDecimal) o[3]);
        }
        //破损
        if (o[4] == null) {
            count.setDamaged(BigDecimal.ZERO);
        } else {
            count.setDamaged((BigDecimal) o[4]);
        }
        map.put("丢失", count.getLost());
        map.put("错运", count.getMisshipMent());
        map.put("漏运",count.getLeakageLuck());
        map.put("少收", count.getLess());
        map.put("破损", count.getDamaged());
        return map;
    }

 

 综上所述,依据地方的步骤就能生成饼图了,欢迎大佬们评论留言。