Autor: CONSTRUCTOR.COM
JSP proporciona muchas herramientas simples y prácticas, incluida la lectura de datos de la base de datos, el envío de datos y la capacidad de mostrar los resultados en un gráfico circular. Ahora veamos este método simple pero práctico.
lo que necesitas
Para ejecutar correctamente los ejemplos relacionados con este artículo, debe necesitar JDK 1.2 o superior, un sistema de administración de bases de datos relacionales y un servidor de red JSP. Depuré estos ejemplos en Tomcat y también utilicé las clases com.sun.image.codec.jpeg publicadas por Sun Java 2 SDK.
Diseño de base de datos Suponga que trabaja para una empresa que vende frutas frescas. Las frutas que vende la empresa incluyen: manzanas, naranjas y uvas. Ahora su jefe quiere utilizar un gráfico circular para mostrar el volumen total de ventas de cada tipo de fruta. El gráfico circular puede aclarar las ventas de cada producto de un vistazo y el jefe puede comprender rápidamente las transacciones de productos de la empresa. .
La tabla A utiliza dos listas de bases de datos de este artículo. La primera lista (Productos) contiene los nombres de todos los productos vendidos; la segunda lista (Ventas) contiene el volumen de ventas correspondiente a cada producto.
La lista de Productos contiene dos campos: ID de producto y nombre de producto. La lista de Ventas contiene ID de venta, ID de producto y monto total. El ID de producto en la lista de ventas proporciona la asociación entre las dos listas. Los totales en la lista de ventas contienen el monto en efectivo de cada venta como un número de punto flotante.
El método getProducts() en la Tabla B conecta dos bases de datos y guarda todos los nombres de productos en una matriz. Establezco las siguientes reglas de base de datos:
ProductID es el más exclusivo en la lista de productos y es. también los más críticos;
ProductID tiene un valor de 0 para el primer registro;
Todos los registros consecutivos posteriores son acumulativos, por lo que el ID de producto del segundo registro es 1, el ID de producto del tercer registro es 2, y así sucesivamente.
Estas reglas de base de datos permiten almacenar datos en la matriz de productos, como se muestra a continuación:
arr[rs.getInt("productID")] = rs.getString("productname");
Algunos sistemas de administración de bases de datos permiten el almacenamiento automático de datos de forma predeterminada. Acumulación o clasificación automática. Cuando esté diseñando una base de datos, asegúrese primero de averiguar qué reglas sigue su sistema de administración de bases de datos, como acumulación automática, clasificación automática, etc.
Obtener el volumen total de ventas
En la mayoría de los casos, habrá muchos registros en la lista de ventas, por lo que el acceso rápido y eficiente a la base de datos es muy importante. Ahora solo necesitamos acceder a las ventas totales de cada producto en la base de datos.
El método getSales() de la Tabla C se conecta a la base de datos y devuelve una matriz que contiene las ventas totales de cada producto. Cuando getSales() recorre todos los registros, solo almacena el nuevo volumen de ventas de cada producto:
int product = rs.getInt("productID");
arr[producto] += rs.getFloat("cantidad");
Cada producto en el gráfico circular debe mostrarse en un color diferente. Para lograr este propósito, creamos un objeto pieColor (como se muestra en la Tabla D. Este objeto contiene una matriz de colores relacionados:
Color pieColorArray[] = {new Color(210,60,60), new Color(60,210,). 60 )...}
La clase pieColor define un método setNewColor (), que puede incrementar curPieColor y el índice. Al mismo tiempo, puede verificar que el índice no exceda el rango límite, es decir, el método utilizado es: si curPieColor es demasiado grande, se asigna un valor de 0.
De manera más eficiente, setNewColor() recorre cada color y ejecuta el siguiente código en el primer color:
curPieColor++;
if(curPieColor >= pieColorArray.length)
{curPieColor = 0;}
RenderingHints y clases de antialiasing
La clase java.awt.RenderingHints define muchos métodos para mostrar gráficos bidimensionales, incluidos los métodos alpha_interpolation, dithering y antialiasing. RenderingHints ayuda a determinar cómo se muestran los gráficos y cómo se procesan mejor.
Para visualizarlo sin problemas, puede utilizar el método antialiasing para procesar gráficos circulares. Antialiasing es un método de suavizado de gráficos. El algoritmo selecciona el valor de color de un píxel especial y reemplaza el píxel de intersección, suavizando así la intersección de líneas.
La Figura A ilustra el efecto del método antialiasing. Se puede ver que la intersección de las líneas del gráfico circular utilizando el método antialiasing se vuelve muy suave.
La figura A
Al mismo tiempo, también puede crear un objeto RenderingHints y pasarlo al método Graphics2D setRenderingHints(), como se muestra a continuación:
RenderingHints renderHints = new RenderingHints(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setRenderingHints(renderHints);
Crear bordes ajustables
;La forma circular de la Figura A tiene un borde. ¿Cómo puedo cambiar el tamaño del borde? Primero puede definir int border = 10 y luego calcular el tamaño del área dentro del borde para lograr:
Ellipse2D.Double elb = new Ellipse2D.Double(x_pie - border/2, y_pie - border/2, pieWidth + border, pieHeight + borde);
x_pie El valor de y_pie representa la esquina superior izquierda del cuadrado que rodea la forma circular. Obtenemos el centro de la forma del pastel tomando la mitad del área del borde (borde/2).
Teoría del arco (Arc) El método fillArc() heredado de la clase java.awt.Graphics proporciona un método simple para dibujar varias partes (o arcos) de gráficos circulares:
g2d.fillArc(x_position, y_position, width, height, startAngle , barridoAngle);
los números enteros x_position e y_position representan las coordenadas x, y de la esquina superior izquierda del arco que se va a llenar, y los números enteros de ancho y alto representan su tamaño específico. Si los valores de ancho y alto son iguales, el gráfico circular será un círculo. Si el ancho y el alto no son iguales, el gráfico circular será una elipse.
El método fillArc() determina el tamaño del arco en función del valor entero de barridoAngle. Si el valor de barridoAngle es positivo, el arco se dibuja en el sentido contrario a las agujas del reloj; de lo contrario, se dibuja en el sentido de las agujas del reloj.
El primer paso para dibujar un arco es utilizar el método getPieColor() del objeto pieColor para obtener el color del arco circular más cercano y asignarlo al arco actual:
g2d.setColor
(pc.getPieColor());
, a través del bucle continuo sales[] array y acumularlo para obtener el volumen total de ventas:
salesTotal += sales[i]
Usando el volumen total de ventas, puedes calcular el porcentaje de las ventas de cada producto en el volumen total de ventas:
float; perc = (sales [i]/salesTotal);
Calculamos barridoAngle para asignar grados a cada parte del arco:
int
barridoAngle = (int)(perc * 360);
al ángulo de barrido actual. Esto garantiza que la parte del arco actual comience desde el arco anterior, creando así una forma circular completa.
Mostrar iconos Los iconos proporcionan la forma más sencilla de mostrar las distintas partes de un gráfico circular. El tamaño de un icono debe corresponder a la cantidad ocupada en el gráfico circular.
La Figura B muestra un gráfico circular completo y los íconos correspondientes a cada parte, incluido el nombre del producto, el volumen total de ventas y la participación de cada parte.
Imagen B
Resumen
Este artículo describe cómo utilizar JSP para dibujar métodos y algoritmos de gráficos circulares. Estos métodos y algoritmos son simples y prácticos, y los desarrolladores pueden aprovecharlos al máximo.