• highcharts中pie统计图获取数据


    从列子知道数据是array类型的,但不知后端传回来的数据怎样转换成应有的数据类型,下面是获取数据的方法:

    /**
     * pie统计图获取的映射类
     * @author Administrator
     *
     */
    public class JPicData {

        private String name;
        private double value;
        @Override
        public String toString() {
            return "JPicData [name=" + name + ", value=" + value + "]";
        }
        public JPicData(String name, double value) {
            super();
            this.name = name;
            this.value = value;
        }
        public JPicData() {
            super();
        }
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
        public double getValue() {
            return value;
        }
        public void setValue(double value) {
            this.value = value;
        }
        
        
    }

       /**

    controller类
         * 企业地域分布
         * @return
         */
        @RequestMapping("/qyaddr")
        public @ResponseBody List<JPicData> qyaddr(){
            List<JPicData> list = new ArrayList<JPicData>(){
                {
                    add(new JPicData("泊头市",10));
                    add(new JPicData("吴桥",30));
                    add(new JPicData("东光县",21));
                    add(new JPicData("青县",16));
                }
            };
            return list;
        }

    前端ajax:

    $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/webzwc/qyaddr',
                contentType:'application/json;charset=utf-8',
                async:false,
                success:function(data){
                    //定义一个数组            
                    ydata = [],
                    $.each(data,function(i,d){
                        ydata.push([d.name,d.value]);
                    });
                    qyaddr(ydata);
                }
            });

    最后将pie中的data:[……]换成传入的参数就行,上代码:

    function qyaddr(data){
            new Highcharts.Chart({
                chart: {
                    renderTo: 'container2',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: ''
                },
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
                    }
                },
                plotOptions: {
                    pie:{
                        allowPointSelect: true,
                        cursor: 'pointer',
                        showInLegend: true,
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',                    
                            formatter: function() {
                                return this.y;
                            }
                        }
                    }
                },        
                legend:{
                    borderWidth:0,
                },
                series: [{
                    type: 'pie',
                    name: 'pie',
                    data: data
                }]
            });
        }

    作者:战旗 内容声明: 本内容属自己学习使用 ,若有抄袭情邮件(zhanqi3712@qq.com)告知 ,本人会尽快删除
  • 相关阅读:
    Vue 组件的基础介绍
    Java web中的路径问题
    个人网站的使用路线
    EL表达式
    jsp
    状态管理和作用域对象
    servlet
    jsp session获取问题
    关于jsp页面中接收二维数组
    个人网站开发(二)
  • 原文地址:https://www.cnblogs.com/liuyun-10/p/6806311.html
Copyright © 2020-2023  润新知