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来解析出来

上面就是一个完整的流程，若是有疑问，能够评论留言....