etmvc+jQuery EasyUI Highcharts实现柱状图

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