动态生成柱状图 hightchats

最新推荐文章于 2023-11-04 17:35:42 发布

我是漂亮的女程序员

最新推荐文章于 2023-11-04 17:35:42 发布

阅读量1.3k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/a520songhai/article/details/80754359

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

首先是后台 controller层来一个简单的查询获取list

 @RequestMapping("zhuzhuangtu")
       @ResponseBody
       public List  zhuzhuangtu() {


        List<Ploy>  list= studentService.showzhuzhuangtu();

           return list;   

       }

接着前端里面注意几个细节

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">


$(document).ready(function() { 
var seriesArry = [];
$.ajax({
    url:'../sh/zhuzhuangtu',
    type:'post',
    dataType:'json',
    async:false,
    success:function(data){


        for(var i =0 ;i < data.length; i++ ){
            var dataHigh = "";
            dataHigh += "{name:'"+data[i]['development']+"',";


            dataHigh += "data:"+data[i]['pname']+"}";

            seriesArry.push(eval('('+dataHigh+')'));


        }
    }
}); 

var categories = [];
var datas = [];
for(var i=0;i<seriesArry.length;i++){

    categories.push(seriesArry[i]['name']);
    alert(seriesArry[i]['name']);
    datas.push(seriesArry[i]['data']);



}
alert(categories);

alert(datas);
var chart = Highcharts.chart('container',{
    chart: {
            type: 'column'
    },
    title: {
            text: '类型统计'
    },
    xAxis: {
            categories: categories,
            crosshair: true
    },
    yAxis: {
            min: 0,
            title: {
                    text: '数量 (个)'
            }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table><br/>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
            column: {
                    borderWidth: 0
            }
    },
    series: [{
        name: '部门数量',
        data: datas
    }]
});

});


</script>



</body>
</html>

pojo层

public class Ploy {
    private  int pid;

    private  String pname;

    private  String  sex;

    private String development;

    public int getPid() {
        return pid;
    }

    public void setPid(int pid) {
        this.pid = pid;
    }

    public String getPname() {
        return pname;
    }

    public void setPname(String pname) {
        this.pname = pname;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getDevelopment() {
        return development;
    }

    public void setDevelopment(String development) {
        this.development = development;
    }





}

数据库与pojo层一致

mapping里

<select id="showzhuzhuangtu"  resultType="com.shy.pojo.Ploy">
       SELECT development , count(development) as pname  from ploy group by development

    </select>

我是漂亮的女程序员

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
动态生成柱状图 hightchats

首先是后台 controller层来一个简单的查询获取list @RequestMapping("zhuzhuangtu") @ResponseBody public List zhuzhuangtu() { List&lt;Ploy&gt; list= studentService.showzhuzhuangtu(); ...
复制链接

扫一扫