Realmente não me atrevo a dizer que estou “falando” aqui da biblioteca GD, pois só usei GD uma ou duas vezes e ainda não tive contato com a maioria das funções. Mas Sanbuzhu Xiaodiao me pediu com entusiasmo para escrever um manuscrito, então não tive escolha a não ser aguentar e escrever algumas de minhas próprias experiências. Espero que possa servir como ponto de partida.
Na verdade, não precisamos necessariamente usar GD para conseguir o efeito “gráfico” na página web. A solução mais fácil é o histograma – que pode ser resolvido com HTML. Por exemplo:
<?$b = matriz(150.110.125.180.160.175.230.220 ?>);
<html>
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<título></título>
<estilo>
<!--
td{tamanho da fonte:9pt}
-->
</estilo>
</head>
<corpo>
<borda da tabela=0>
<tr valign="bottom"> /* (1) */
<?for($i=0;$i<8;$i++) { ?><td align="center">
<table height="<?echo $b[$i];?>" border=0> /* (2) */
<tr>
<td bgcolor="#3F7F9F" largura="40"></td> /* (3) */
</tr>
</table><br><font color="#3F7F9F"><?echo $b[$i];?></font> /* (4) */
</td><? } ?>
</tr>
</tabela>
</body>
</html>
<? $b = array(150,110,125,180,160,175,230,220); É um conjunto de dados que não tem nada a ver com a situação geral. o código. Notas, vamos explicá-los um por um agora.
(1) O que deve ser observado aqui é valign="bottom", que serve para alinhar a parte inferior do conteúdo da célula. Por que adicioná-lo em <tr>
Pano de lã? Você pode fazer com que o conteúdo desta linha da tabela siga esse alinhamento sem precisar especificá-lo em cada <td>.
Desta forma, o código original da página HTML resultante da execução do PHP pode economizar dezenas de bytes! Economize o tempo valioso do visualizador.
(2) Atenção, o mais crítico está aqui! <table height="xxx">, usamos o atributo height da tabela para
Para conseguir “colunas” de diferentes alturas. Para que todos possam ver claramente, os dados originais não foram dimensionados proporcionalmente.
Se seus dados forem particularmente grandes ou pequenos, não é apropriado atribuí-los diretamente ao atributo de altura da tabela. Em vez disso, eles devem ser atribuídos com base na situação.
Os dados devem ser dimensionados adequadamente. Por exemplo, você estima que cada número em seu conjunto de dados estará entre 3.000 e 8.000.
Você pode considerar reduzi-los 25 vezes, ou seja, height="<? echo floor(b[$i]/25); ?>"
(3) Mencione bgcolor="#xxxxxx" nesta linha, que é a cor do cilindro (RGB). Na verdade, o histograma real deveria ser
Cada cilindro usa uma cor Para deixar o código o mais simples possível, usei esse loop for, então não tem como dar.
Cada cilindro recebe uma cor. ——Na verdade, existe uma maneira que eu realmente não preciso escrever para este exemplo.
Uma função que extrai cores para confundir os iniciantes. Então, cabe a você aperfeiçoar essa parte.
(4) Aqui os dados reais são exibidos na mesma cor das barras. Claro, você também pode optar por colocar esse número no topo do cilindro
, talvez mais profissional. No entanto, ainda estou acostumado a colocá-lo abaixo.
Com a ajuda de tabelas HTML, podemos construir vários histogramas. Este exemplo usa bgcolor para exibir blocos de cores.
Além disso, você também pode usar background="(picture)". A imagem é padronizada, portanto a coluna do histograma possui padrões.
E se você exibir os dados reais em uma cor bem contrastante no <td> mostrado na nota (3) acima, também terá um efeito muito bom.
A descrição acima é uma forma eficaz de evitar GD, mas se você quiser fazer gráficos complexos, você deve usar GD.
Infelizmente, no manual chinês do PHP4, diz-se que existem 44 funções na biblioteca de funções GD, mas olhei para a versão mais recente do manual inglês do PHP4,
Já existem mais de 80 funções GD! Como o inglês do autor é ruim, só posso fazer suposições ao ler o manual em inglês, então não tenho certeza se a nova biblioteca GD suporta GIF novamente? De qualquer forma, acho que já que estamos usando PHP que é totalmente gratuito, por que deveríamos “arriscar” usar um GIF protegido por direitos autorais? Por que não ir de graça e usar PNG? Contanto que você não precise de animação, o PNG também pode criar arquivos tão pequenos quanto GIF!
A seguir, combinarei um programa e descreverei essas funções GD comumente usadas, uma frase de cada vez.
Vamos começar do início.
<?
Header("Tipo de conteúdo: imagem/png");
// Isto está enviando um cabeçalho HTTP para informar ao navegador: "Ouça, isto é uma imagem, não exiba como texto!"
// Devido à minha preferência pessoal, usei PNG Claro, você também pode usar Header("Content-type: image/gif");
// Ou Header("Tipo de conteúdo: imagem/jpeg");
$im = ImagemCriar (50, 100);
//Criar imagem. Observe que o formato da imagem não foi atribuído quando ela foi criada.
// Função ImageCreate, dois parâmetros, sem dúvida, essa é a largura e a altura da imagem criada.
// Seu valor de retorno é um valor int. Este valor é muito importante.
// Até você gerar esta imagem, esse valor será usado em todos os lugares. Vamos chamá-lo de ID da imagem.
// Como a frequência de uso é bastante alta, atribuímos a ela uma variável com um nome mais curto.
// Agora vamos desenhar uma linha. A função de desenho de linha é assim:
// linha de imagem (int im, int x1, int y1, int x2, int y2, int col);
// O primeiro parâmetro im é o ID da imagem, seguido por x1, y1, x2, y2, nem é preciso dizer,
// São as coordenadas do ponto inicial (x1, y1) e do ponto final (x2, y2)! (As coordenadas do canto superior esquerdo da imagem são (0,0))
//Qual é o último parâmetro? É a cor! GD requer a definição de cores para imagens e o uso dessas cores definidas para desenhar.
// Por que precisamos definir cores para imagens? Meu palpite é que ela é usada como "paleta" para GIF, PNG e outras imagens.
// Isso envolve o conhecimento da própria imagem, por isso não entrarei em detalhes aqui.
//Então, antes de traçar a linha, temos que definir primeiro a cor (o que é realmente problemático).
// $col_red = ImageColorAllocate($im, 255.192.192);
// Esta função tem quatro parâmetros, o primeiro $im... ainda preciso dizê-lo todas as vezes? Não direi isso da próxima vez!
//Os próximos três parâmetros são os componentes vermelho (R), verde (G) e azul (B) da cor a ser definida, variando de 0 a 255.
// Isto envolve novamente conhecimento de física-óptica. Os diferentes componentes de luz das três cores primárias vermelho, verde e azul,
//Produz cores em constante mudança. A cor que defini acima é 255 vermelho, 192 verde e 192 azul.
// Se não me engano, este é um vermelho mais brilhante. Vamos tentar traçar uma linha em um momento.
// Por que esperar um pouco? Porque se uma imagem tiver apenas uma cor, nada poderá ser visto!
// Vamos deixar o fundo preto primeiro!
// Embora não esteja explicitamente declarado no manual, descobri que a cor definida primeiro será usada como plano de fundo por padrão.
$col_black = ImageColorAllocate($im, 0,0,0);
// Define uma cor Não há luz vermelha, luz verde ou luz azul. É naturalmente preto - preto.
//Defina então a cor usada para desenhar a linha:
$col_red = ImageColorAllocate($im, 255.192.192);
// Agora você pode começar a desenhar linhas vermelhas:
linha de imagem ($im, 10, 20, 45, 85, $col_red);
// Não se preocupe, você não conseguirá ver a imagem depois de terminar esta frase.
ImagemPNG($im);
// Esta frase gera uma imagem. ImagePNG() gera uma imagem png e ImageJPEG gera uma imagem jpeg.
// Imagem GIF de saída ImageGIF...
// Não esqueça que tem um parâmetro aqui, se ele for exibido na tela ao invés de salvar em um arquivo,
// Omita este parâmetro - o nome do arquivo salvo. Se você quiser salvá-lo como um arquivo,
// Deve ser escrito assim: ImagePNG($im,"test.png");
// Se nenhum caminho for especificado, este arquivo será salvo no diretório atual do seu web.
// Se for JPEG, existe mais um parâmetro, que é a qualidade JPEG (0~100).
// Se quiser exibi-lo na tela, ImageJPEG($im,"",80);
// Se quiser salvar, ImageJPEG($im,"test.jpg",80);
// Observe que se você quiser salvar esta imagem como um arquivo,
// Você não pode usar Header("Content-type: image/png");
// Porque quando isso acontecer, significa que você produzirá uma imagem.
ImagemDestroy($im);
// Destrua a imagem na memória para liberar espaço na memória.
// É isso: o desenho GD mais simples está feito.
// Através de testes, constatou-se que o arquivo de imagem gerado no formato PNG possui apenas 131 bytes.
// Usar o formato JPEG, mesmo usando a pior qualidade (0), requer 855 bytes, e a qualidade da imagem é muito ruim para ser visualizada.
// A qualidade JPEG mais alta requer 2360 bytes, mas as cores ainda não são tão vivas quanto ao usar PNG.
// Percebe-se que para esse tipo de imagem com pequeno número de cores, usar PNG é muito mais econômico que JPEG.
?>
Desta vez vou parar por aqui e tentarei continuar escrevendo o mais rápido possível.