etmvc+jQuery EasyUI Highcharts实现柱状图

来源：互联网发布：windows最新系统编辑：程序博客网时间：2024/05/24 02:10

基于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}  

运行截图：

先介绍到这，其他图可结合Highcharts相关的教程来实现，附带多个JS+Json柱状图饼图折线图示例里面有多个不同的JS图标库的示例代码

0 0