SSH Framework Online Mall project 29th War on the use of Jschart technology display merchandise Sales report _java

This project is finally nearing the end of the registration function I will not do, about the registration function my other article detailed introduction of the registration form verification, you can add the function directly to this project, modify the relevant jump can, no longer do. In addition, the current project only action layer and service layer, DAO layer I have not extracted, finished this report, I took the DAO layer, and then the whole project to make a summary, almost can upload the source code, then welcome everyone to download ~
This section mainly does the last function: Use Jschart This tool to display the sales report of the goods, Jschart is very useful to make a report of the tool, the reason is good, because its official example to do very well, you can directly in the graphical interface of the operation of the corresponding code, we modify, Then put it into the logic of our own project.

1. Introduction to Jschart Tools

Jschart is an excellent production report tool, the generated code is JS, so the front-end JSP page is a good use of tools, you can look at the official website of Jschart, open click Online Edit, and then casually select a report click to enter, We can edit the chart types and formats we want online, as follows:! [Jschart] (http://img.blog.csdn.net/20160526130623846) Again down, you can set the type we want:! [Jschart] (http://img.blog.csdn.net/20160526130958645) are all set up, you can click on the above generated JS code button, and then copy the corresponding code into our JSP. The following is my generated JS code (intercept useful parts can):

 <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 ', ' #ECC049 ', ' #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 (' Commodity name ', false);
 Mychart.setaxisnamey (' Sales ', true);
 Mychart.setgridopacity (0.8);
 Mychart.setaxispaddingleft (50);
 Mychart.setaxispaddingbottom (40);
 Mychart.set3d (TRUE);
Mychart.draw (); </script> 

So we have to generate a graph of the JS code, the following we analyze the entire process: first, the front desk JSP page to send an AJAX request, and then the background from the database to retrieve the corresponding data, where the data we only need to take out what goods sold and the corresponding number of sold can, In other words, we have to take the order items from the table, in addition, the front desk has to pass a parameter to tell the background to take how many data. After the back of the data in JSON format sent to the front desk, and then run the above JS code (of course, to do the corresponding changes) to display the data into the form of the report. Well, according to this process, first do the backstage.

2. Complete the logic of background query

First in the service layer to complete the query function, this query query two items: the number of goods and merchandise sales. Take a look at the code:

Sorderservice interface Public
interface Sorderservice extends baseservice<sorder> {
 //omit unrelated code
 ... Query the sales of hot items public
 list<object> querysale (int number);
}

Sorderserviceimpl Implementation class
@Service ("Sorderservice")
@SuppressWarnings ("unchecked") Public
class Sorderserviceimpl extends baseserviceimpl<sorder> implements
  Sorderservice {

 //Omit irrelevant code
 ... @Override public
 list<object> querysale (int number) {
  //without fecth the two
  String hql = "Select" S.name, SUM (s.number) from the Sorder s join s.product GROUP by s.product.id ";
  Return GetSession (). CreateQuery (HQL)//
   . Setfirstresult (0)//.
   setmaxresults (number)//.
   list ();
}

And then we'll do the part of the action:

@Controller
@Scope ("prototype") Public
class Sorderaction extends baseaction<sorder> {
 public String Addsorder () {

 //omit unrelated code

 ... Back to popular items and their sales volume public
 String Querysale () {
  list<object> jsonlist = Sorderservice.querysale ( Model.getnumber ());
  Why do you put the list of queries to the top of the value stack? Look at the explanations below
  actioncontext.getcontext (). Getvaluestack (). push (jsonlist);
  return "Jsonlist";
 }

There's a ' list ' object in the baseaction, but we can't use this object because Jsonlist is a ' list ' object, not a ' list ' object in Baseaction, so we're going to define a ' list ' in this action. 　　Object and implement the Get method, and then configure root in the Struts.xml file, but that's a bit of a hassle. Here's a simpler way to do this, struts2 in turn JSON if the configured root is not found, the data is taken from the stack top of the stack to turn JSON, so we simply throw the jsonlist we have now to the top of the stack and then write the result in the configuration file. So the struts.xml is as follows:! [Struts.xml] (http://img.blog.csdn.net/20160526133359517)

3. Complete the front end of the JSP page

The logic behind the background is finished, and now we have to complete the foreground jump logic and the logic of receiving the JSON data 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" >  

The main is a few selection boxes, can be based on user choice to make corresponding display, $.post (), there are four parameters, the first is to specify the received action, I write in the Selection tab, directly by locating the DOM element to get, the second parameter is the parameter to be transferred, here is the number to display, The third parameter is the function to be executed after receiving the background JSON data, and the fourth parameter is specifying the received data type, which is the JSON type.
Here's a look at the functions that are executed after receiving the background data, this is mainly before the automatic generation of JS code, mainly to generate reports, but made a little change, such as the type of icon changed to the type of user choice, the number of display has also changed, but this is some small change, the problem is not big. Let's look at the display of different types of icons:

The effect is quite good, so if there is a need to make a report of friends, recommend the use of this jschart tool, very easy ~ the whole project to write so much of the bar ~ back to do a summary, and then upload the source code, it is almost over.

Original address: http://blog.csdn.net/eson_15/article/details/51506334

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.