基於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;
    }

 

 綜上所述，按照上面的步驟就能生成餅圖了，歡迎大佬們評論留言。