Easily implement data pie charts on JSP pages

Making adjustable boundaries

In Figure A, a pie chart has a boundary. How can we change the boundary size? You can first define int border = 10, and then calculate the size of the area within the boundary to achieve the following:
Ellipse2d. Double ELB = new ellipse2d. Double (x_pie-border/2, y_pie-border/2, piewidth + border, pieheight + border );

The x_pie and y_pie values represent the upper left corner of the square surrounding the pie chart. We get the center of the pie chart by taking half of the boundary area (border/2.

　　Arc Theory

The fillarc () method inherited from the java. AWT. graphics class provides an easy way to draw all parts (or arcs) of a pie chart:

G2d. fillArc (x_position, y_position, width, height, startAngle, sweepAngle );

X_position, and y_position integers represent the coordinates of x and y in the upper-left corner of the arc to be filled. The width and heigh integers represent the specific size of the arc. If the width and height values are equal, the pie chart is a circle. If the width and height are not equal, the pie chart is an elliptic.

The fillarc () method determines the arc Size Based on the sweepangle integer. If the sweepangle value is positive, the arc is drawn in the clockwise direction.

　　Draw an arc

Step 1: Use the getpiecolor () method of the piecolor object to obtain the color of the nearest pie arc and assign it to the current arc ::

G2d. setColor (pc. getPieColor ());

Then, the total sales volume is obtained by continuously looping the sales [] array and accumulating it:

SalesTotal + = sales [I];

Using the total sales volume, you can calculate the percentage of sales of each product to the total sales volume:

Float perc = (sales [I]/salesTotal );

After calculating the sweepangle, we can allocate degrees to each part of the arc:

Int sweepAngle = (int) (perc * 360 );

After each part of the arc is drawn, startangle increases progressively according to the current sweepangle. This ensures that the current arc is the beginning of the preceding arc to create a complete pie chart.

　　Show icon

The icon provides the most concise way to display all parts of a pie chart. The size of an icon should correspond to the possession in the pie chart.

Figure B shows a complete pie chart and its corresponding icons, including the product name, total sales volume, and the quantity of each part.

Figure B

　　Summary

This article describes how to use JSP to draw pie charts and algorithms. These methods and algorithms are simple and practical and can be fully utilized by developers.