Vamos ver como fazer graficos tipo velocímetro usando imagens previamente criadas
Uma coisa interessante sobre esse gráfico, é que é possível utilizar valores negativos e valores que ultrapassam a escala, tudo isso sem nenhum tipo de alteração no script e/ou configuração do mesmo.
Para criar nossa grafico precisaremos de uma imagem de fundo, a qual terá a escala do grafico e
uma imagem que será nosso ponteiro, usaremos essas:
A função imagerotate() é quem será responsável pela rotação do ponteiro.
Ela rotaciona a imagem em sentido anti-horário, então se quisermos fazer com que nosso ponteiro gire em sentido horário devemos passar um valor negativo a essa função.
O angulo inicial também pode ser definido em nosso grafico, veja a figura abaixo para ter uma referencia mais clara:
Vamos ao código completo:
<?php
// previne o cache
header ("Expires: Mon, 26 Jul 1990 05:00:00 GMT");
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header ("Cache-Control: no-cache, must-revalidate");
header ("Pragma: no-cache");
header ("Content-Disposition:inline; filename=\"grafico.png\"");
// função para facilitar a criação das cores (cor no formato #rrggbbaa)
function rgba($i,$c){
return imagecolorallocatealpha($i,hexdec("$c[1]$c[2]"),hexdec("$c[3]$c[4]"),hexdec("$c[5]$c[6]"),hexdec("$c[7]$c[8]"));
}
// carrega as imagens
$fundo=imagecreatefrompng("fundo6.png"); // não esquecer de verificar o nome do arquivo
$seta= imagecreatefrompng("seta6.png"); // não esquecer de verificar o nome do arquivo
// cria uma cor transparente, necessário para a rotação do ponteiro
$tr=rgba($seta ,"#0000007f");
// define as configurações da escala
$max=100; // valor maximo da escala
$max_an=270; // a abertura maxima em graus
$min_an=45; // angulo inicial
// define o centro de rotação do ponteiro
$pos[0]=200; // eixo horizontal
$pos[1]=200; // eixo vertical
////////////////////////
$v=50; // valor de teste
////////////////////////
// calcula o angulo de rotação de acordo com a abertura maxima,
//angulo inicial e o valor
$vp=$v*($max_an/100);
$vp=$vp/($max/100)+$min_an;
// transforma em numero negativo
$vp=$vp*(-1);
// faz a rotação da seta
$seta=imagerotate($seta,$vp,$tr);
// pega as dimensoes da seta apos a rotacao
$marca_larg=imagesx($seta);
$marca_alt= imagesy($seta);
// calcula o centro da seta apos a rotacao
$cx=$marca_larg/2;
$cy=$marca_alt/2;
// sobrepoe a seta no fundo
imagecopyresampled($fundo,$seta,$pos[0]-$cx,$pos[1]-$cy,0,0,$marca_larg,$marca_alt,$marca_larg,$marca_alt);
// exibe a imagem
header("Content-type: image/png");
imagepng($fundo);
// fim :)
?>
=============================================================
Como resultado teremos essa imagem:
outros exemplos:
