This project is finally coming to an end, so I won’t do the registration function. Another article about the registration function has introduced the registration form verification in detail. You can directly add the function to this project and modify the relevant jumps, so I will not do it anymore. In addition, at present, this project only has the action layer and service layer. I have not extracted the dao layer yet. After completing this report, I extracted the dao layer and then summarized the entire project. You can upload the source code. You are welcome to download it at that time~
This section mainly creates the last function: use JsChart as a tool to display product sales reports. JsChart is a very useful tool for making reports. The reason why it is easy to use is because its official examples are very well done. You can directly generate corresponding code after operating in the graphical interface. We modify it and then put it in the logic of our own project.
1. Introduction to JsChart Tools
JsChart is an excellent report-making tool. The generated code is js, so it is a good tool for using front-end jsp pages. You can take a look at JsChart's official website, click Online Edit after opening it, and then select a report and click to enter. You can edit the chart type and format we want online, as follows:  Turn down and you can set the type we want:  After all, you can click the button that generates the js code above, and then copy the corresponding code to our jsp. Here is the js code I generated (just intercept the useful part):
<div id="chart_container">Loading chart...</div><script type="text/javascript"> var myChart = new JSChart('chart_container', bar'', ''); myChart.setDataArray(['#44A622','#A7B629','#CAD857','#E4DB7B','#ECDE49','#EC9649','#D97431','#D95531']); myChart.colorize(colorArr.slice(0,data.length)); myChart.setSize(100*$("#number").val(), 400); myChart.setBarValues(false); myChart.setBarSpacingRatio(45); myChart.setBarOpacity(1); myChart.setBarBorderWidth(1); myChart.setTitle('Mall Sales Report'); myChart.setTitleFontSize(10); myChart.setTitleColor('#607985'); myChart.setAxisValuesColor('#607985'); myChart.setAxisNameX('Product Name', false); myChart.setAxisNameY('Sales', true); myChart.setGridOpacity(0.8); myChart.setAxisPaddingLeft(50); myChart.setAxisPaddingBottom(40); myChart.set3D(true); myChart.draw();</script> In this way, we have the js code to generate the chart. Let’s analyze the entire process: First, the front-end jsp page sends an Ajax request, and then the back-end fetches the corresponding data from the database. We only need to retrieve the data here which products have been sold and the corresponding sold quantity, which means we have to take from the line item table. In addition, the front-end has to pass a parameter to tell the back-end how many pieces of data to get. After the background is fetched, the data is sent to the foreground in json format, and the foreground runs the above js code (of course, corresponding modifications are required) to display the data in the form of a report. OK, according to this process, do the backend first.
2. Complete the logic of background query
First, the query function is completed in the service layer. During this query, two items are queried: the product and the sales quantity of the product. Take a look at the code:
//sorderService interface public interface SorderService extends BaseService<Sorder> { //Save irrelevant code... //Query the sales volume of hot products public List<Object> querySale(int number);}//sorderServiceImpl implementation class @Service("sorderService")@SuppressWarnings("unchecked")public class SorderServiceImpl extends BaseServiceImpl<Sorder> implements SorderService { //Save irrelevant code... @Override public List<Object> querySale(int number) { //The two items found without affect are String hql = "select s.name, sum(s.number) from Sorder s join s.product group by s.product.id"; return getSession().createQuery(hql) // .setFirstResult(0) // .setMaxResults(number) // .list(); }} Then we complete the action part:
@Controller@Scope("prototype")public class SorderAction extends BaseAction<Sorder> { public String addSorder() { //Save irrelevant code... //Return popular products and their sales public String querySale() { List<Object> jsonList = soorderService.querySale(model.getNumber()); //Put the queryed list at the top of the value stack, why do this? See the explanation below ActionContext.getContext().getValueStack().push(jsonList); return "jsonList"; }} There is a `List` object in BaseAction, but we cannot use this object, because here jsonList is a `List` object, not a `List` object in BaseAction, so we need to define a `List` object in this Action and implement the get method, and then configure root in the struts.xml file, but this is a bit troublesome. Here is a simpler method. If you cannot find the configured root when struts2, you will take out the data from the top of the value stack to convert json. So we just throw the jsonList we have now to the top of the value stack, and then write the result in the configuration file. So the struts.xml is as follows: 
3. Complete the front-end jsp page
The logic in the background has been written, and now we need to complete the jump logic in the front desk and the logic after receiving the json data transmitted from the background. The sale.jsp page is as follows:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <%@ include file="/public/head.jspf" %> <script type="text/javascript" src="${shop }/js/jquery-1.11.1.js"></script> <script type="text/javascript" src="${shop }/js/jscharts.js"></script> <script type="text/javascript"> $(function(){ $("#submit").click(function(){ var colorArr = ['#44A622','#A7B629','#CAD857','#E4DB7B','#ECDE49','#ECC049','#EC9649','#D97431','#D95531','#E4DB7B']; //Send Ajax request $.post($("#sale").val(), {number:$("#number").val()}, function(data){ var myChart = new JSChart('chart_container', $("#type").val(), ''); myChart.setDataArray(data); myChart.colorize(colorArr.slice(0,data.length));//Select a few to display myChart.setSize(100*$("#number").val(), 400); myChart.setBarValues(false); myChart.setBarSpacingRatio(45); myChart.setBarOpacity(1); myChart.setBarBorderWidth(1); myChart.setTitle('Mall Sales Report'); myChart.setTitleFontSize(10); myChart.setTitleColor('#607985'); myChart.setAxisValuesColor('#607985'); myChart.setAxisNameX('Product Name', false); myChart.setAxisNameY('Sales', true); myChart.setGridOpacity(0.8); myChart.setAxisPaddingLeft(50); myChart.setAxisPaddingBottom(40); myChart.set3D(true); myChart.draw(); }, "json"); }); }); }); </script></head><body style="margin:10px;"> Please select the report type: <select id="sale"> <option value="sorder_querySale.action">Annual Sales Report</option> </select> Number of queries: <select id="number"> <option value="5">5</option> <option value="7">7</option> <option value="10">10</option> </select> Type: <select id="type"> <option value="bar">Column type</option> <option value="line">line type</option> <option value="pie">pie-shaped type</option> </select> <input type="button" id="submit" value="query"> <div id="chart_container">Loading Chart...</div></body></html> There are mainly several selection boxes that can be displayed according to user selection. There are four parameters in $.post();. The first one is to specify the received action. I wrote it in the selection tag and it is obtained directly by positioning the dom element. The second parameter is the parameter to be transmitted. Here is the number to be displayed. The third parameter is the function to be executed after receiving the background json data. The fourth parameter is to specify the received data type. Here is the json type.
Let’s take a look at the functions executed after receiving background data. This is mainly the js code that was automatically generated before. It mainly needs to generate reports, but a little modification has been made, such as the type of the icon has been changed to the type selected by the user, and the number of displayed items has also been changed. However, these are some minor changes, and there is no big problem. Let’s take a look at the display effects of different types of icons:
The effect is quite good, so if you have friends who need to make reports, it is recommended to use this JsChart tool, which is very useful~ I have basically written so much in the whole project~ I will make a summary later and upload the source code, and it will be almost over.
Original address: http://blog.csdn.net/eson_15/article/details/51506334
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.