etmvc+jQuery EasyUI Highcharts实现柱状图

转载于 2016-03-13 16:24:30 发布 · 1k 阅读

收录于

easyui

本文介绍了使用Highcharts实现柱状图的过程，包括从前端获取JSON数据并展示为图表，后端通过数据库获取数据返回JSON格式。展示了具体的HTML、JavaScript及Java代码实现。

基于JQuery easyUI 使用Highcharts实现了数据柱状图的显示，前段显示主要使用Highchartst这个图表库，后端使用etmvc框架从数据库获取数据，前后端数据交互采用Json数据格式，主要代码如下：

前段HTML：

[html]view plain copy 
   
 <div style="padding:5px;">  
     <fieldset>  
      <div>  
         <div style="margin: 0 1px">  
         <div id="containerliuliang" style="min-width: 368px; height: 368px; margin: 0 auto"></div>  
         </div>  
      </div>  
     </fieldset>  
 </div>  

前段JS：

[html]view plain copy 
   
 <script type="text/javascript">  
        /*获取json数据开始*/  
        //定义变量  
        $(document).ready(function () {  
            var jsonXData = [];  
            var jsonyD1 = [];  
            var jsonyD2 = [];  
          //获取数据  
            $.ajax({ url: '/ciccpsMember/memberfee/memberfeeByYear',  
                cache: false,  
                async: false,  
                success: function (data) {  
                    var json = eval("(" + data + ")");  
                    if (json.Rows.length > 0) {  
                        for (var i = 0; i < json.Rows.length; i++) {  
                            var rows = json.Rows[i];  
                            var Year = rows.year;  
                            var ShouldPay = rows.shouldPay;  
                            var TruePay = rows.truePay;  
                            jsonXData.push(Year); //赋值  
                            jsonyD1.push(ShouldPay);  
                            jsonyD2.push(TruePay);  
                        } //for  
                        var chart;  
                        chart = new Highcharts.Chart({  
                            chart: {  
                                renderTo: 'containerliuliang',//放置图表的容器  
                                plotBackgroundColor: null,  
                                plotBorderWidth: null,  
                                defaultSeriesType: 'column'   //图表类型line, spline, area, areaspline, column, bar, pie , scatter   
                            },  
                            title: {  
                                text: '近年会费缴纳情况',  
                                style: { font: 'normal 13px 宋体' }  
                            },  
                            xAxis: {//X轴数据  
                                categories: jsonXData,  
                                lineWidth: 2,  
                                labels: {  
                                    rotation: -45, //字体倾斜  
                                    align: 'right',  
                                    style: { font: 'normal 13px 宋体' }  
                                }  
                            },  
                            yAxis: {//Y轴显示文字  
                                lineWidth: 2,  
                                title: {  
                                    text: '金额/万元'  
                                }  
                            },  
                            tooltip: {  
                                formatter: function () {  
                                    return '<b>' + this.x + '</b><br/>' +  
                                 this.series.name + ': ' + this.y+'万元';  
                                }  
                            },  
                            plotOptions: {  
                                column: {  
                                    dataLabels: {  
                                        enabled: true  
                                    },  
                                    enableMouseTracking: true//是否显示title  
                                }  
                            },  
                            series: [{  
                                name: '应缴',  
                                data: jsonyD1  
                            }, {  
                                name: '实缴',  
                                data: jsonyD2  
                            }]  
                        });  
                        //$("tspan:last").hide(); //把广告删除掉  
                    } //if  
                }  
            });  
        });  
     </script>  

后端代码：

[java]view plain copy 
   
 /** 
  * 近几年会费 
  */  
 public JsonView memberfeeByYear() throws Exception {  
   
     db connection = new db();  
     String sql = "select * from  memberfeesview";  
     ResultSet rs = connection.executeQuery(sql);  
     List<Map<String, Object>> _list = new ArrayList<Map<String, Object>>();  
     if (rs != null) {  
         try {  
             while (rs.next()) {  
                 /* 获取信息 */  
                 Map<String, Object> _map = new HashMap<String, Object>();  
                 _map.put("year", rs.getString("year"));  
                 _map.put("shouldPay", rs.getFloat("shouldPay"));  
                 _map.put("truePay", rs.getFloat("truePay"));  
                 _list.add(_map);  
             }  
         } catch (Exception e) {  
             e.printStackTrace();  
         } finally {  
             try {  
                 rs.close();  
             } catch (Exception e) {  
                 e.printStackTrace();  
             }  
             connection.closed();  
         }  
     }  
       
     Map<String, Object> result = new HashMap<String, Object>();  
     result.put("RowCount",_list.size());  
     result.put("Rows", _list);  
     JsonView view = new JsonView(result);  
     view.setContentType("text/html;charset=utf-8");  
     return view;  
 }  

Json数据格式：

[plain]view plain copy 
   
 {"Rows":[{"truePay":30.0,"shouldPay":140.0,"year":"2013"},{"truePay":140.0,"shouldPay":140.0,"year":"2012"},{"truePay":134.5,"shouldPay":140.0,"year":"2011"},{"truePay":141.0,"shouldPay":140.0,"year":"2010"},{"truePay":85.0,"shouldPay":86.5,"year":"2009"}],"RowCount":5}  