基于highcharts+easui+java生成饼图

前言：第一次接触饼图，刚开始没有思路，后面在网上找了一下对比了一下，发现用highcharts插件去生成图表特别简单，用起来还是非常简单的，只需要后台返回相应的数据前台用json接收一下，就可以完美的实现了。

一、先来个实体展示，让大家看看效果

（效果还是美美的）

二、要实现这个效果首先要去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.1引入相应的js文件才能实现页面效果

由于我在Web开发框架中，主要采用了MVC+EasyUI的方式，因包含的文件如下所示。(每个图表需要引得文件官网的demo里面都有）

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

四，后台代码格式

（注明：每个的后台框架和条件都不一样，最重要的是返回一个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;
    }

 

 综上所述，按照上面的步骤就能生成饼图了，欢迎大佬们评论留言。