Java与Highcharts实例（五） -饼图数据传递(后台Java传递数

最新推荐文章于 2024-02-02 11:15:39 发布

转载最新推荐文章于 2024-02-02 11:15:39 发布 · 459 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/1170536/blog/345368

文章标签：

#java #javascript #json #ViewUI

本文介绍如何使用Highcharts库绘制饼图，并展示了从前端到后端的完整数据处理流程。文章详细解释了如何配置饼图的各项属性，如背景颜色、边框宽度等，并通过JavaScript实现了动态加载数据的功能。

2019独角兽企业重金招聘Python工程师标准>>>

由于之前用的是柱状图，这次使用的是饼图，由于数据格式不一致，所以重新做了一个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来解析出来

上面就是一个完整的流程，如果有疑问，可以评论留言....

转载于:https://my.oschina.net/u/1170536/blog/345368