etmvc+jQuery EasyUI Highcharts实现柱状图
2013-01-28 15:25
344 查看
基于JQuery easyUI 使用Highcharts实现了数据柱状图的显示,前段显示主要使用Highchartst这个图表库,后端使用etmvc框架从数据库获取数据,前后端数据交互采用Json数据格式,主要代码如下:
前段HTML:
前段JS:
后端代码:
Json数据格式:
运行截图:
先介绍到这,其他图可结合Highcharts相关的教程来实现,附带
多个JS+Json柱状图饼图折线图示例 里面有多个不同的JS图标库的示例代码!
前段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图标库的示例代码!
相关文章推荐
- etmvc+jQuery EasyUI Highcharts实现柱状图
- etmvc+jQuery EasyUI combobox实现google提示
- “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第四篇(用户管理功能的实现)
- MVC+Jquery easyui实现无限级部门小示例
- MVC+Jquery easyui实现无限级部门小示例
- Jquery easyui + MVC实现无限级部门小示例
- “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第三篇(登录窗口的实现以及如何保存登录者的信息)
- springmvc + jquery easyui实现分页显示
- MVC+Jquery easyui实现无限级部门示例
- etmvc+jQuery EasyUI使用教程(一)
- etmvc+jQuery EasyUI+POI动态导出EXCEL
- jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
- etmvc+jQuery EasyUI使用教程(四)—数据的交互
- etmvc+jQuery EasyUI使用教程(二)
- etmvc+jQuery EasyUI使用教程(三)
- “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第四篇(用户管理功能的实现)
- springmvc + jquery easyui实现分页显示
- jquery easyui datagrid实现数据修改
- SpringMVC+Hibernate +MySql+ EasyUI实现CRUD
- jquery图表插件--jqPlot实现柱状图