Java與Highcharts實例（五） -餅圖數據傳遞(後臺Java傳遞數

因爲以前用的是柱狀圖，此次使用的是餅圖，因爲數據格式不一致，因此從新作了一個demo，直接上代碼，因爲以前有引用highchart的js，如今的頁面代碼就省略，有不清楚的能夠看以前的demo案例，若是有很差的地方，請各位指點！

頁面js代碼效果（官方提供）

$(function() {
        $('#container')
                .highcharts(
                        {
                            chart : {
                                plotBackgroundColor : null,
                                plotBorderWidth : null,
                                plotShadow : false
                            },
                            title : {
                                text : '瀏覽器比列分析'
                            },
                            tooltip : {
                                pointFormat : '{series.name}: <b>{point.percentage:.1f}%</b>'
                            },
                            plotOptions : {
                                pie : {
                                    allowPointSelect : true,
                                    cursor : 'pointer',
                                    dataLabels : {
                                        enabled : true,
                                        color : '#000000',
                                        connectorColor : '#000000',
                                        format : '<b>{point.name}</b>: {point.percentage:.1f} %'
                                    }
                                }
                            },
                            series : [{
                                type : 'pie',
                                name : 'Browser share',
                                data : [ 
                                         [ 'Firefox', 45.0 ], 
                                         [ 'IE', 26.8 ], 
                                         
                                [ 'Safari', 8.5 ], 
                                [ 'Opera', 6.2 ],
                                [ 'Others', 0.7 ] ]
                            } 
                            ]
                        });
    });

html代碼

<div id="container" style="width: 100%; height: 400px;"></div>

改變後的js代碼

 $(function() {
     
    var options = {
            chart : {
                                plotBackgroundColor : null,
                                plotBorderWidth : null,
                                plotShadow : false
                            },
                            title : {
                                text : '比例統計分析'
                            },
                            tooltip : {
                                pointFormat : '{series.name}: <b>{point.percentage:.1f}%</b>'
                            },
                            plotOptions : {
                                pie : {
                                    allowPointSelect : true,
                                    cursor : 'pointer',
                                    dataLabels : {
                                        enabled : true,
                                        color : '#000000',
                                        connectorColor : '#000000',
                                        format : '<b>{point.name}</b>: {point.percentage:.1f} %'
                                    }
                                }
                            },
                            series : []  //指定數據列,這裏設爲空，咱們從後臺拿數據
        }; 
    
    //從後臺獲取json格式的數據，第一個參數 url地址
    $.getJSON("getData.do" , function(data) {
        //插入Json數據
        options.series = data;
        //初始化chart
        var chart = new Highcharts.Chart(options);
    });

});

後臺調用java代碼，

在官方的demo能夠看出，須要的數據裏面是數組套數組，我仍是使用對象的方式來封裝數據，再經過gson解析，傳入到前臺

java代碼

1.主數據封裝對象

public class SysSmsSerie {
    private String type;
    private String name;
    private List<Object[]> data;
    public String getType() {
        return type;
    }
    public void setType(String type) {
        this.type = type;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public List<Object[]> getData() {
        return data;
    }
    public void setData(List<Object[]> data) {
        this.data = data;
    }

2.數組數據封裝

public class SysSmsData {
    private Integer smstype;
    private String scale; //所佔比例
    
    
    public SysSmsData(Integer smstype, String scale) {
        super();
        this.smstype = smstype;
        this.scale = scale;
    }
    
    public Integer getSmstype() {
        return smstype;
    }
    public void setSmstype(Integer smstype) {
        this.smstype = smstype;
    }
    public String getScale() {
        return scale;
    }
    public void setScale(String scale) {
        this.scale = scale;
    }

3.調用方法

public String getData(HttpServletRequest request){
        SysSmsSerie ss=new SysSmsSerie(); //建立主對象數據
        ss.setType("pie");
        ss.setName("比例統計分析");
        //這裏的list是經過後臺調用方法獲取的真實數據，在此略
        if(list.size()>0){
            List<Object[]> listObj=new ArrayList<Object[]>();
            for(int i=0;i<list.size();i++){
                SysSmsSerieData ssd=new SysSmsSerieData();
                Object[] obj=new Object[2];
                    ssd.setType("類型1");
                    obj[0]=ssd.getType();
                try {
                    //數據所佔比例,這個地方如今使用的是測試數據（數據須要真實的獲取）
                    ssd.setScale(50);
                    obj[1]=ssd.getScale();
                } catch (Exception e) {
                    ssd.setScale(0);
                }
                listObj.add(obj);
            }
            ss.setData(listObj);
        }
        Gson gson = new Gson();
        System.out.println(gson.toJson(ss));
        return gson.toJson(ss);
    }

還用一種方式就是使用二維數組的方式來組裝數據（你們感興趣的能夠試一下），在經過gson來解析出來

上面就是一個完整的流程，若是有疑問，能夠評論留言....