Author: BUILDER.COM
JSP provides many simple and practical tools, including reading data from the database, sending data, and being able to display the results in a pie chart. Now let's look at this simple yet practical method.
what you need
In order to correctly run the examples related to this article, you must need JDK 1.2 or higher, a relational database management system, and a JSP network server. I debugged these examples in Tomcat, and I also used the com.sun.image.codec.jpegclasses released by the Sun Java 2 SDK.
Database design Suppose you work for a company that sells fresh fruits. The fruits sold by the company include: apples, oranges, and grapes. Now your boss wants to use a pie-shaped graph to display the total sales volume of each type of fruit. The pie-shaped graph can make the sales of each product clear at a glance, and the boss can quickly grasp the company's product transactions.
Table A uses two database lists from this article. The first list (Products) contains the names of all products sold; the second list (Sales) contains the sales volume corresponding to each product.
The Products list contains two fields: productID and productname. The Sales list contains saleID, productID, and total amount. The productID in the sales list provides the association between the two lists. The totals in the sales list contain the cash amount for each sale as a floating point number.
The getProducts() method in Table B connects two databases and saves all product names in an array. I set the following database rules:
ProductID is the most unique in the product list, and is also the most critical;
ProductID has a value of 0 for the first record;
All subsequent consecutive records are cumulative, so the productID of the second record is 1, the productID of the third record is 2, and so on.
These database rules allow data to be stored in the product array, as shown below:
arr[rs.getInt("productID")] = rs.getString("productname");
Some database management systems allow automatic storage of data by default. Accumulation or automatic sorting. When you are designing a database, be sure to first find out what rules your database management system follows, such as automatic accumulation, automatic sorting, etc.
Get total sales volume
In most cases, there will be many records in the sales list, so quick and efficient access to the database is very important. Now we just need to access the total sales for each product in the database.
The getSales() method in Table C connects to the database and returns an array containing the total sales of each product. When getSales() traverses all records, it only stores the new sales volume of each product:
int product = rs.getInt("productID");
arr[product] += rs.getFloat("amount");
Each product on the pie chart should be displayed in a different color. In order to achieve this purpose, we create a pieColor object (as shown in Table D). This object contains an array of related colors:
Color pieColorArray[] = {new Color(210,60,60), new Color(60,210,60 )...}
The pieColor class defines a setNewColor() method, which can increment curPieColor and the index. At the same time, it can check that the index does not exceed the boundary range, that is, the method used is: if curPieColor is too large, a value of 0 is assigned.
More efficiently, setNewColor() loops through each color and executes the following code on the first color:
curPieColor++;
if(curPieColor >= pieColorArray.length)
{curPieColor = 0;}
RenderingHints and antialiasing classes
The java.awt.RenderingHints class defines many methods to display two-dimensional graphics, including alpha_interpolation, dithering, and antialiasing methods. RenderingHints help determine how graphics are displayed and how graphics are best processed.
In order to display it smoothly, you can use the antialiasing method to process pie graphics. Antialiasing is a graphics smoothing method. The algorithm selects the color value of a special pixel and replaces the intersection pixel, thereby smoothing the intersection of lines.
Figure A illustrates the effect of the antialiasing method. It can be seen that the intersection of the lines of the pie graph using the antialiasing method becomes very smooth.
Figure A
At the same time, you can also create a RenderingHints object and pass it to the Graphics2D setRenderingHints() method, as shown below:
RenderingHints renderHints = new RenderingHints(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setRenderingHints(renderHints);
Create adjustable borders
The pie shape in Figure A has a border. How can I change the size of the border? You can first define int border = 10, and then calculate the size of the area within the border to achieve:
Ellipse2D.Double elb = new Ellipse2D.Double(x_pie - border/2, y_pie - border/2, pieWidth + border, pieHeight + border);
x_pie The value of y_pie represents the upper left corner of the square surrounding the pie shape. We get the center of the pie shape by taking half the border area (border/2).
Arc (Arc) theory The fillArc() method inherited from the java.awt.Graphics class provides a simple method for drawing various parts (or arcs) of pie-shaped graphics:
g2d.fillArc(x_position, y_position, width, height, startAngle, sweepAngle);
x_position, and y_position integers represent the x, y coordinates of the upper left corner of the arc to be filled, and width and height integers represent its specific size. If the values of width and height are equal, the pie chart will be a circle. If width and height are not equal, the pie chart will be an ellipse.
The fillArc() method determines the size of the arc based on the sweepAngle integer value. If the sweepAngle value is positive, the arc is drawn in a counterclockwise direction, otherwise it is drawn in a clockwise direction.
The first step in drawing an arc is to use the getPieColor() method of the pieColor object to obtain the color of the nearest pie-shaped arc and assign it to the current arc:
g2d.setColor(pc.getPieColor());
Then, through continuous looping sales[] array and accumulate it to obtain the total sales volume:
salesTotal += sales[i];
Using the total sales volume, you can calculate the percentage of the sales of each product in the total sales volume:
float perc = (sales [i]/salesTotal);
We calculate sweepAngle to assign degrees to each part of the arc:
int sweepAngle = (int)(perc * 360);
After each part of the arc is drawn, startAngle can be incremented according to the current sweepAngle. This ensures that the current arc part starts from the previous arc, thereby creating a complete pie shape.
Display Icons Icons provide the simplest way to display the various parts of a pie graph. The size of an icon should correspond to the amount occupied in the pie chart.
Figure B shows a complete pie graph and the icons corresponding to each part, including product name, total sales volume, and share of each part.
Picture B
Summary
This article describes how to use JSP to draw pie graphics methods and algorithms. These methods and algorithms are simple and practical, and developers can make full use of these methods.