etmvc+jQuery EasyUI Highcharts实现柱状图

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

前段HTML：

<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：

 <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>

后端代码：

	/**
	 * 近几年会费
	 */
	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数据格式：

{"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图标库的示例代码！