Para comenzar a ejecutar los ejemplos proporcionados en este artículo, necesita JDK 1.2 o superior ( http://java.sun.com ). También necesitará un servidor web que admita JSP. Probé este ejemplo en Tomcat, donde utilicé la clase com.sun.image.codec.jpeg (publicada en Sun Java 2 SDK) para codificar los datos gráficos.
Dado que desea tener fondos reutilizables, debe crear una clase Java para administrar el diseño, incluido el área del título y los bordes exteriores. Como se muestra en la Figura A.
Figura A
Como puedes ver, he sombreado tanto el área del título como el borde exterior. El título tiene un borde blanco de un píxel de ancho y el área de gráficos tiene un borde negro delgado. Estos bordes añaden definición a las sombras.
Los límites son fáciles de crear. Utilice el método Fill() del objeto Graphics2D para rellenar un rectángulo de título azul y luego utilice el método draw() para dibujar el borde con otro color.
Crear un efecto de sombra también es muy sencillo. Primero, usa el método fill() para dibujar una sombra. Luego, dibuja el título con un desplazamiento de siete píxeles. Este desplazamiento crea un efecto tridimensional, que da como resultado el efecto de sombra.
Supongamos que hay una empresa que vende productos agrícolas y necesita un histograma para mostrar las ventas. En una aplicación práctica, necesitaríamos obtener estos datos de una base de datos o un archivo XML, pero para simplificar, supongamos que los datos de ventas se almacenan en las dos matrices siguientes:
String datanames[] = {"manzana", "naranja", "melocotón", "limón", "pomelo"};
int valores de datos[] = {11, 62, 33, 102, 50};
La primera serie contiene artículos para diversos productos agrícolas vendidos por la empresa. El segundo rango es el volumen de ventas correspondiente a cada producto agrícola.
El histograma se mostrará y guardará en formato JPEG, por lo que debemos configurar MIME, el tipo de contenido, correctamente. Los navegadores utilizan tipos MIME para decidir cómo reaccionar. El siguiente código establece el tipo MIME:
respuesta.setContentType("imagen/jpeg");
A continuación, necesitamos un objeto que represente la imagen. La API Java 2D admite la clase BufferedImage , que proporciona una forma de guardar y administrar datos de píxeles en la memoria. Queremos que los gráficos sean en color, por eso utilizamos el tipo de gráfico TYPE_INT_RGB . Los dos datos enteros WIDTH y HEIGHT se utilizan para especificar el ancho y el alto de la imagen en píxeles:
Imagen Buffered bi = nueva Imagen Buffered (ANCHO, ALTO, Imagen Buffered.TYPE_INT_RGB);
Ahora que tenemos un objeto BufferedImage, podemos configurar el contenido de Graphics2D llamando al método createGraphics() del objeto:
Graphics2D biContext = bi.createGraphics();
El programador que creó el gráfico debe configurar el parámetro ANCHO según la importancia del gráfico y el diseño general de la página. Los elementos gráficos cambian automáticamente de tamaño según los cambios en el ancho del gráfico.
El ancho y el área delimitadora del título, así como el cuadrado recto más largo del gráfico, deben calcularse en función del parámetro WIDTH . El propósito de esto es garantizar que todos los elementos gráficos no excedan el ancho del gráfico y crucen el borde derecho del gráfico.
La cantidad de elementos de datos que deben mostrarse determina el parámetro ALTURA del gráfico. Si se agregan nuevos elementos a las matrices datavalues[] y datanames[] , la altura del gráfico debe crecer en consecuencia para adaptarse al tamaño del área de visualización requerida.
El parámetro máximo se utiliza para el cuadrado recto más largo. Luego, los anchos de otros bloques rectangulares se calculan con respecto al máximo :
int barWidth = (ancho interior * valor actual) / máximo;
El algoritmo anterior utiliza los dos valores máximo y el ANCHO interno (área gráfica) del gráfico para garantizar que el rectángulo se expanda y contraiga automáticamente a medida que cambie el valor de ANCHO .
Para mostrar el gráfico, necesitamos crear una imagen de fondo y luego agregar los datos gráficos. Primero, crea un objeto GraphBG y llama a su método draw() :
gráficoBG gr = nuevo gráficoBG();
gr.draw(biContext, ANCHO, ALTO, "Productos agrícolas", "Promedio general: " + promedio);
Los parámetros del método draw() incluyen contenido gráfico, biContext , WIDTH y HEIGHT , que la clase GraphBG utiliza para determinar el ancho y alto del título y el área gráfica. Finalmente, el valor promedio de los datos se calcula y se agrega al texto que se muestra en el título.
La posición de las coordenadas verticales (eje y) de cada bloque rectangular se calcula de acuerdo con la siguiente fórmula: y_pos = i * displayHeight + headerOffset . displayHeight es igual a la altura del texto en el cuadrado recto más la altura del cuadrado recto, y headerOffset representa la distancia vertical desde la parte superior del gráfico, incluida la altura del área del título y la sombra.
Creé estos rectángulos y sus bordes usando la misma técnica que usé anteriormente para crear los bordes del título. Resté un píxel del ancho y alto de los bordes del rectángulo para que cada rectángulo parezca tener un borde rojo y facilité el efecto de resta dibujando los bordes interiores sobre un fondo blanco.
Hemos creado la imagen en la memoria, ahora la codificamos y se la mostramos al usuario. No podemos usar el flujo de salida JSP predeterminado para procesar JPEG, por lo que necesitamos usar Response.getOutputStream() para obtener el flujo del objeto de respuesta. Podemos usar el flujo de salida para crear un objeto JPEGImageEncoder y llamarlo encode() , pasando el objeto BufferedImage que creamos anteriormente:
Codificador JPEGImageEncoder = JPEGCodec.createJPEGEncoder (salida);
codificador.codificar(bi);
La imagen resultante es relativamente pequeña y ocupa sólo 13,7 kilobytes de capacidad. La figura B da el efecto final:
Figura B
En cualquier caso, la salida de index.jsp es una imagen JPEG. Puede guardarlo en su escritorio o presionar la tecla Imprimir pantalla para tomar una captura de pantalla. Si necesita mostrar varios gráficos en la misma página o introducir gráficos en otro contenido, puede usar la etiqueta HTML img (< img src = ”index.jsp"> ) y luego colocar los gráficos cuando sea necesario, como Usar un forma.
Quizás una de las tecnologías de Internet más antiguas para gráficos generados dinámicamente pueda realizar otras tareas además de mostrar una imagen. Imagine que necesita registrar la cantidad de espectadores de esta imagen (similar a registrar la cantidad de clics en un anuncio), luego necesita implementar tareas como el recuento de clics, el acceso a bases de datos o archivos en index.jsp , y puede procesar estas tareas en segundo plano no es necesario utilizar el cambio de página almacenada en el búfer para el usuario.
En este artículo examinamos un método que produce histogramas nítidos y de apariencia agradable. Manejamos hábilmente cambiar el tamaño de los gráficos y codificarlos en formato JPEG, y discutimos la modificación del código HTML para colocar las imágenes resultantes en diferentes ubicaciones de la página.