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