标签：log src nat tle bin html on() 折线图 var
//1.dao层查询出按照年的各个月份的销售额(关联的字段是:
//month(orders),sum(ordedetail))
//并且将数据获取的给设置成map集合
public List<Map<String, Object>> getSumMoney(int year) {
String hql = "select new Map(month(o.createtime) as month, sum(od.money) as y) "
+ "from Orderdetail od, Orders o "
+ "where od.orders = o "
+ "and o.type=‘2‘ and od.state=‘1‘ "
+ "and year(o.createtime)=? "
+ "group by month(o.createtime)";
return (List<Map<String, Object>>) this.getHibernateTemplate().find(hql, year);
}
//2.service层对数据进行处理 @Override public List<Map<String, Object>> trendReport(int year) { //result 部分月份的数据： 有些月份是没有数据，没有数据的月份是不会在result里面 List<Map<String,Object>> result = reportDao.getSumMoney(year); //[{"month":6,"y":1045.4}] //把存在的数据转成map<Integer,Double>, key=月份, value=数值 //定义一个map来接收转换后数据 Map<Integer,Object> existsMonthDataMap = new HashMap<Integer, Object>(); for(Map<String,Object> existMap : result){ //exitsMap=> {"month":6,"y":1045.4} existsMonthDataMap.put((Integer)existMap.get("month"), existMap.get("y")); } //existsMonthDataMap => {"6":"1045.4"}, {"7":"9527"} //[{"month":6,"y":1045.4}] List<Map<String, Object>> returnList = new ArrayList<Map<String, Object>>(); //******** 补月份的数据 **************** for(int i = 1; i<=12; i++){ Map<String,Object> data = new HashMap<String,Object>(); //如果存在月份的数据 if(null != existsMonthDataMap.get(i)){ data.put("month", i); data.put("y", existsMonthDataMap.get(i)); }else{ data.put("month", i); data.put("y", 0); } //把每个月份的数据加到list中 returnList.add(data); } return returnList; }
//3.action写回到前端
/**
* 销售趋势
*/
public void trendReport(){
List<Map<String, Object>> report = reportBiz.trendReport(year);
write(JSON.toJSONString(report));
}
$(function(){ //加载表格数据 $(‘#grid‘).datagrid({ url:‘report_trendReport‘, columns:[[ {field:‘month‘,title:‘月份‘,width:100}, {field:‘y‘,title:‘销售额‘,width:100} ]], singleSelect: true, onLoadSuccess:function(data){ showChart(data.rows); } }); //点击查询按钮 $(‘#btnSearch‘).bind(‘click‘,function(){ //把表单数据转换成json对象 var formData = $(‘#searchForm‘).serializeJSON(); $(‘#grid‘).datagrid(‘load‘,formData); }); }); /** * 展示图 * @param data */ function showChart(data){ var monthData = new Array(); for(var i = 1; i <=12; i++){ monthData.push(i + "月"); } $(‘#trendChart‘).highcharts({ title: { text: $(‘#year‘).combobox(‘getValue‘) + ‘年销售趋势分析‘, x: -20 //center }, subtitle: { text: ‘Source: www.itheima.com‘, x: -20 }, xAxis: { categories: monthData }, yAxis: { title: { text: ‘元 (￥)‘ }, plotLines: [{ value: 0, width: 1, color: ‘#808080‘ }] }, tooltip: { valuePrefix: ‘￥‘ }, legend: { layout: ‘vertical‘, align: ‘center‘, verticalAlign: ‘bottom‘, borderWidth: 0 }, series: [{ name: ‘销售额‘, data: data }] }); }
<link rel="stylesheet" type="text/css" href="ui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="ui/themes/icon.css"> <script type="text/javascript" src="ui/jquery.min.js"></script> <script type="text/javascript" src="ui/jquery.easyui.min.js"></script> <script type="text/javascript" src="ui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="ui/jquery.serializejson.min.js"></script> <script type="text/javascript" src="ui/highcharts.js"></script> <script type="text/javascript" src="js/report_trend.js"></script> </head> <body class="easyui-layout"> <div data-options="region:‘center‘,title:‘销售趋势表‘" style="padding: 4px; background-color: #eee"> <div style="height: 2px;"></div> <form id="searchForm"> 年份<input class="easyui-combobox" name="year" id="year" data-options="url:‘json/year.json‘,valueField:‘year‘, textField:‘year‘" /> <button type="button" id="btnSearch">查询</button> </form> <div style="height: 2px;"></div> <table id="grid"></table> </div> <div data-options="region:‘east‘,iconCls:‘icon-reload‘,title:‘销售统计图‘,spilt:true" style="width: 600px;" id="trendChart"></div> </body> </html>
标签：log src nat tle bin html on() 折线图 var
原文地址：http://www.cnblogs.com/liushisaonian/p/7091976.html
