基于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图标库的示例代码