SSH框架线上商城项目第29战使用JsChart技术展示商品销售报表

这个项目终于要结束了，我就不做注册功能了。关于注册功能的另一篇文章详细介绍了注册的表单验证。可以直接将函数添加到这个项目中，修改相关的跳转，然后停止执行。另外，目前这个项目只有动作层和服务层，我还没有提取dao层。完成这个报告后，我会提取dao层，对整个项目做一个总结，这样我几乎可以上传源代码了。欢迎大家下载~本节主要做最后一个功能：使用JsChart作为工具，展示商品的销售报表。JsChart是一个非常有用的制作报表的工具，因为它的官方示例非常好，可以在图形界面操作后直接生成相应的代码，所以很容易使用。我们可以修改它，并将其放入我们自己项目的逻辑中。

1.jschart工具介绍。

JsChart是制作报表的优秀工具，生成的代码是js，所以是使用前端jsp页面的好工具。你可以看看JsChart的官网，打开点击在线编辑，然后点击任意报表进入，在线编辑我们想要的图表类型和格式，如下：[jschart](http://img.blog.csdn.net/20160526130623846)可以调低设置我们想要的类型：[jschart](http://img.blog.csdn.net/20160526130958645)设置好后，可以点击上面生成js代码的按钮，然后将相应的代码复制到我们的jsp中。以下是我生成的js代码(只截取有用的部分):

div id='chart_container '加载图表./div script type=' text/JavaScript ' var myChart=new JSChart(' chart _ container '，bar ' '，' ')；myChart.setDataArray(['#44A622 '，' #A7B629 '，' #CAD857 '，' #E4DB7B '，' #ECDE49 '，' #ECC049 '，' #EC9649 '，' #D97431 '，' # d 95531 '])；mychart . coloring(colorar . slice(0，data . length))；myChart.setSize(100*$('#number '))。val()，400)；mychart . setbarvalues(false)；mychart . setbarspacinging ratio(45)；mychart . setbaropacity(1)；mychart . setbarborderwidth(1)；MyChart.setTitle('商场销售报告')；mychart . settitlefontsize(10)；mychart . settitle collor(' # 607985 ')；mychart . setaxisvalueescolor(' # 607985 ')；MyChart.setAxisNameX('商品名称'，false)；MyChart.setAxisNameY('销量'，true)；mychart . setgridopacity(0.8)；mychart . setaxispaddingleft(50)；mychart . setaxispaddingbottom(40)；myChart.set3D(真)；mychart . draw()；/script这样我们就有了生成图表的js代码。我们来分析一下整个过程：首先前台的jsp页面发送一个Ajax请求，然后后台从数据库中取出相应的数据。我们只需要拿出卖的是哪些商品以及对应的销售数量，也就是说，我们要从订单项目表中取出它们。此外，前台还得通过一个参数告诉后台要取多少条数据。后台准备好之后，将数据以json格式发送到前台，前台会运行上面的js代码(当然会做相应的修改)以报表的形式显示数据。好了，按照这个流程，先做好后台。

2.完成后台查询的逻辑。

首先，查询功能在服务层完成。在这个查询中，可以查询两个项目：商品和商品的销售数量。看看代码：

//sorderService接口公共接口sorderService扩展了baseserviceorder {//省略无关的代码.//查询热门商品的销量公共listobject查询销量(int数)；}/}//sorderServiceImpl实现类@ service(' sorterservice ')@ suppress warnings(' unchecked ')。Class sorterserviceimpl扩展baseservicesimplesorter实现sorterservice {//省略不相关的代码.@覆盖public listobject查询sale (int number)。{//你不需要费克斯去发现的是两个字符串HQL='从s订单中选择s.name，sum(s . number)s .通过s.product.id加入s.product组'；返回getSession()。createQuery(hql) //。setFirstResult(0) //。setMaxResults(number) //。list()；}}那我们来完成动作部分：

@ controller @ scope ('prototype ')公共类sorteraction扩展了base actionsorder { public string add order(){//省略无关的代码.//公共字符串query sale(){ list object JSON list=sorter service。querysale(模型。返回getnumber()))。//将查询的列表放在值堆栈的顶部。你为什么这么做？请看下面的解释：actioncontext.getcontext()。getvaluestack()。push(jsonlist)；返回“JSonList”；} } BaseAction中有一个‘list’对象，但是我们不能使用这个对象，因为这里的jsonList是一个‘list’对象，而不是base action中的‘list’对象，所以我们需要在这个动作中定义一个‘list’对象并实现get方法，然后在struts.xml文件中配置root，但是这个有点麻烦。这里有一个更简单的方法。如果struts2找不到配置的根，它将从值堆栈的顶部获取数据，将其转换为json。因此，我们只需要将我们得到的json列表抛出到值堆栈的顶部，然后将结果写入配置文件。因此，struts.xml如下：[struts . XML](http://img . blog . csdn . net/20160 . 20166666666

3.完成前端jsp页面。

后台逻辑完成。现在我们要完成前台的跳转逻辑和后台收到json数据后的逻辑。sale.jsp页面如下：

% @ page language=' Java ' import=' Java . util . * ' page encoding=' UTF-8 ' %！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML head % @ include file='/PUBLIC/head . jspf ' % script type=' text/JavaScript ' src=' http : $ { shop }/js/jquery-1 . 11 . 1 . js '/script script type=' text/JavaScript ' src=' http 3360 $ { shop }/js/jscharts . js '/script script type=' text/JavaScript 'click(function(){ var colorar=[' # 44 a622 '，' #A7B629 '，' #CAD857 '，' #E4DB7B '，' #ECDE49 '，' #ECC049 '，' #EC9649 '，' #D97431 '，' #D95531 '，' # e4d b7b ']；//发送Ajax请求$。post ($ ('# sale ')。val()，{number: $ ('# number ')。val ()}，函数(数据){ var mychart=new jschart(' chart _ container '，$ ('# type '))。myChart.setDataArray(数据)；mychart . coloring(colorar . slice(0，data . length))；//选择几个显示几个mychart.setsize (100 * $ ('# number ')。val()，400)；mychart . setbarvalues(false)；mychart . setbarspacinging ratio(45)；mychart . setbaropacity(1)；mychart . setbarborderwidth(1)；MyChart.setTitle('商场销售报告')；mychart . settitlefontsize(10)；mychart . settitle collor(' # 607985 ')；mychart . setaxisvalueescolor(' # 607985 ')；MyChart.setAxisNameX('商品名称'，false)；MyChart.setAxisNameY('销量'，true)；mychart . setgridopacity(0.8)；mychart . setaxispaddingleft(50)；mychart . setaxispaddingbottom(40)；myChart.set3D(真)；mychart . draw()；}，' JSON ')；});});/script/head body style=' margin 336010 px；选择报告类型：选择id=' sale ' option value=' s order _ query sale . action '年度销售报告/选项/选择查询数量：选择id=' number' optionvalue=' 5' 5/。选项值=' 7 ' 7/选项选项值=' 10 ' 10/选项/选择类型：选择id=' type '选项值=' bar '列类型/选项选项值='line '行类型/选项值=' pie '饼图/选项/选择输入类型=' button' id=' submit '值=' query' div id=' chart _ container '加载图表./div/body/html主要是几个选择框，可以根据用户的选择显示，$。post()；中有四个参数，第一个是指定接收到的动作，我写在selection标签中，通过定位dom元素直接获取；第二个参数是要传输的参数，这里是要显示的数字；第三个参数是接收后台json数据后要执行的功能；第四个参数是指定接收到的数据类型，这里是json类型。让我们看一下接收到后台数据后执行的功能。这主要是之前自动生成的js代码，主要是生成报表，不过做了一些修改。例如，图标的类型已更改为用户选择的类型，显示的数量也已更改。不过这些都是小改动，没有大问题。让我们来看看不同类型图标的显示效果：

效果挺好的，所以如果有需要做报告的朋友，推荐使用这个JsChart工具，非常好用~整个项目基本写了这么多~然后做个总结，上传源代码，差不多就结束了。

原地址：http://blog.csdn.net/eson_15/article/details/51506334.

这就是本文的全部内容。希望对大家的学习有帮助，希望大家多多支持我们。