Realmente no me atrevo a decir que estoy "hablando" de la biblioteca GD aquí, porque solo he usado GD una o dos veces y aún no he entrado en contacto con la mayoría de las funciones. Pero Sanbuzhu Xiaodiao me pidió con entusiasmo que escribiera un manuscrito, así que no tuve más remedio que hacer de tripas corazón y escribir algunas de mis propias experiencias. Espero que pueda servir como punto de partida.
De hecho, no necesariamente tenemos que usar GD para lograr el efecto de "gráfico" en la página web. La solución más sencilla es el histograma, que se puede resolver con HTML. Por ejemplo:
<? $b = matriz(150,110,125,180,160,175,230,220);
<html>
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=gb2312">
<título></título>
<estilo>
<!--
td{ tamaño de fuente:9pt }
-->
</estilo>
</cabeza>
<cuerpo>
<borde de la tabla=0>
<tr valign="abajo"> /* (1) */
<?for($i=0;$i<8;$i++) { ?><td align="center">
<table height="<?echo $b[$i];?>" borde=0> /* (2) */
<tr>
<td bgcolor="#3F7F9F" width="40"></td> /* (3) */
</tr>
</table><br><font color="#3F7F9F"><?echo $b[$i];?></font> /* (4) */
</td><? } ?>
</tr>
</tabla>
</cuerpo>
</html>
<? $b = array(150,110,125,180,160,175,230,220); ?> Es un conjunto de datos. El origen de los datos no tiene nada que ver con la situación general. Depende de sus necesidades. el código. Notas, expliquemos una por una ahora.
(1) Lo que se debe tener en cuenta aquí es valign="bottom", que consiste en alinear la parte inferior del contenido de la celda. ¿Por qué agregarlo en <tr>?
¿Paño de lana? Puede hacer que el contenido de esta fila en la tabla siga esta alineación sin tener que especificarlo en cada <td>.
De esta manera, el código original de la página HTML resultante de la ejecución de PHP puede ahorrar decenas de bytes. Ahorre el valioso tiempo del espectador.
(2) ¡Atención, lo más crítico está aquí! <table height="xxx">, usamos el atributo de altura de la tabla para
Para lograr "columnas" de diferentes alturas. Para que todos puedan ver con claridad, los datos originales no se han escalado proporcionalmente.
Si sus datos son particularmente grandes o pequeños, no es apropiado asignarlos directamente al atributo de altura de la tabla, sino que deben asignarse según la situación.
Los datos deben escalarse adecuadamente. Por ejemplo, estima que cada número en su conjunto de datos estará entre 3000 y 8000.
Puedes considerar reducirlos 25 veces, es decir, height="<? echo floor(b[$i]/25); ?>"
(3) Mencione bgcolor="#xxxxxx" en esta línea, que es el color del cilindro (RGB). De hecho, el histograma real debería ser
Cada cilindro usa un color Para mantener el código lo más simple posible, usé este bucle for, por lo que no hay forma de darlo.
A cada cilindro se le asigna un color. ——En realidad, hay una manera, simplemente no necesito escribirla para este ejemplo.
Una función que extrae colores para confundir a los principiantes. Entonces, depende de ti perfeccionar esa parte.
(4) Aquí los datos reales se muestran en el mismo color que las barras. Por supuesto, también puedes optar por poner este número en la parte superior del cilindro.
, tal vez más profesional. Sin embargo, todavía estoy acostumbrado a ponerlo debajo.
Con la ayuda de tablas HTML, podemos construir varios histogramas. Este ejemplo usa bgcolor para mostrar bloques de colores.
Además, también puedes usar background="(imagen)". La imagen tiene un patrón, por lo que las columnas del histograma tienen patrones.
Y si muestra los datos reales en un color muy contrastante en el <td> que se muestra en la nota (3) anterior, también tendrá un muy buen efecto.
Lo anterior es una forma eficaz de evitar GD, pero si desea crear gráficos complejos, debe utilizar GD.
Lamentablemente, en el manual chino de PHP4 se dice que hay 44 funciones en la biblioteca de funciones GD, pero miré la última versión del manual PHP4 en inglés.
¡Ya existen más de 80 funciones GD! Dado que el inglés del autor es pobre, solo puedo hacer conjeturas al leer el manual en inglés, por lo que no estoy seguro de si la nueva biblioteca GD admite GIF nuevamente. De todos modos, creo que dado que utilizamos PHP, que es completamente gratuito, ¿por qué deberíamos "arriesgarnos" a utilizar un GIF con derechos de autor? ¿Por qué no hacerlo gratis y utilizar PNG? ¡Siempre que no necesites animación, PNG también puede crear archivos tan pequeños como GIF!
A continuación, combinaré un programa y describiré estas funciones GD de uso común una oración a la vez.
Empecemos desde el principio.
<?
Encabezado("Tipo de contenido: imagen/png");
// Esto es enviar un encabezado HTTP para decirle al navegador: "¡Escuche, esto es una imagen, no la muestre como texto!"
// Debido a mis preferencias personales, utilicé PNG. Por supuesto, también puedes usar Header("Content-type: image/gif");
// O encabezado("Tipo de contenido: imagen/jpeg");
$im = Crear Imagen (50, 100);
// Crear imagen. Tenga en cuenta que el formato de la imagen no se ha asignado cuando se crea.
// Función ImageCreate, dos parámetros, sin duda, este es el ancho y alto de la imagen creada.
// Su valor de retorno es un valor int. Este valor es muy importante. Continúa dibujando esta imagen.
// Hasta que generes esta imagen, este valor se usa en todas partes. Llamémoslo ID de la imagen.
// Debido a que la frecuencia de uso es bastante alta, la asignamos a una variable con un nombre más corto.
// Ahora dibujemos una línea. La función de dibujo lineal es así:
// línea de imagen (int im, int x1, int y1, int x2, int y2, int col);
// El primer parámetro im es el ID de la imagen, seguido de x1, y1, x2, y2, no hace falta decirlo,
// ¡Son las coordenadas del punto inicial (x1, y1) y del punto final (x2, y2)! (Las coordenadas de la esquina superior izquierda de la imagen son (0,0))
//¿Cuál es el último parámetro? ¡Es el color! GD requiere definir colores para las imágenes y usar estos colores definidos para dibujar.
// ¿Por qué necesitamos definir colores para las imágenes? Supongo que se utiliza como "paleta" para GIF, PNG y otras imágenes.
// Esto implica el conocimiento de la imagen en sí, por lo que no entraré en detalles aquí.
// Entonces, antes de dibujar la línea, primero tenemos que definir el color (lo cual es realmente problemático).
// $col_red = ImageColorAllocate($im, 255,192,192);
// Esta función tiene cuatro parámetros, el primero $im... ¿todavía necesito decirlo cada vez? ¡No lo diré la próxima vez!
//Los siguientes tres parámetros son los componentes rojo (R), verde (G) y azul (B) del color que se definirá, y van de 0 a 255.
// Esto nuevamente implica conocimientos de física y óptica. Los diferentes componentes luminosos de los tres colores primarios rojo, verde y azul,
//Produce colores en constante cambio. El color que definí arriba es 255 rojo, 192 verde y 192 azul.
// Si no me equivoco, este es un rojo más brillante. Intentemos trazar una línea en un momento.
// ¿Por qué esperar un rato? Porque si una imagen tiene un solo color, ¡no se ve nada!
// ¡Primero hagamos que el fondo sea negro!
// Aunque no se indica explícitamente en el manual, descubrí que el color definido primero se usará como fondo de forma predeterminada.
$col_black = ImageColorAllocate($im, 0,0,0);
// Define un color. No hay luz roja, luz verde o luz azul. Es naturalmente negro.
// Luego define el color usado para dibujar la línea:
$col_red = ImageColorAllocate($im, 255,192,192);
// Ahora puedes empezar a dibujar líneas rojas:
línea de imagen ($im, 10, 20, 45, 85, $col_red);
// No te preocupes, no podrás ver la imagen después de terminar esta frase.
ImagenPNG($im);
// Esta oración genera una imagen. ImagePNG() genera una imagen png e ImageJPEG genera una imagen jpeg.
// Imagen GIF de salida de imagen gif...
// No olvides que hay un parámetro aquí, si se muestra en la pantalla en lugar de guardarlo en un archivo,
// Omitir este parámetro: el nombre del archivo guardado. Si desea guardarlo como un archivo,
// Debería escribirse así: ImagePNG($im,"test.png");
// Si no se especifica ninguna ruta, este archivo se guarda en el directorio actual de su web.
// Si es JPEG, hay un parámetro más, que es la calidad JPEG (0~100).
// Si deseas mostrarlo en la pantalla, ImageJPEG($im,"",80);
// Si desea guardar, ImageJPEG($im,"test.jpg",80);
// Tenga en cuenta que si desea guardar esta imagen como un archivo,
// No puedes usar Header("Content-type: image/png");
// Porque una vez que esto suceda, significa que generarás una imagen.
ImageDestroy($im);
// Destruye la imagen en la memoria para liberar espacio en la memoria.
// Eso es todo: el dibujo GD más simple está hecho.
// A través de las pruebas, se encontró que el archivo de imagen generado en formato PNG solo tiene 131 bytes.
// El uso del formato JPEG, incluso con la peor calidad (0), requiere 855 bytes y la calidad de la imagen es demasiado mala para poder verla.
// La calidad JPEG más alta requiere 2360 bytes, pero los colores aún no son tan vívidos como cuando se usa PNG.
// Se puede ver que para este tipo de imágenes con una pequeña cantidad de colores, usar PNG es mucho más rentable que JPEG.
?>
Esta vez me detendré aquí e intentaré seguir escribiendo lo antes posible.