Caricamento
PHP grafica dinamica, grafici e gradienti
Sintesi
GD è una libreria di codice open source per la creazione dinamica di immagini.
Scritta in C, il suo uso è disponibile con vari linguaggi di programmazione fra i quali PHP di solito è attivo per default.GD crea immagini nei formati grafici PNG, JPEG e GIF e molti altri. Comunemente utilizzata in siti web per generare e modificare immagini runtime, il suo impiego è molto più ampio e variegato.Le immagini create con GD sono identiche alle immagini “fisiche” raggiungibili con URL e link HTML. L'utilità della libreria è enorme, si pensi alla creazione in tempo reale di grafici e report o l’applicazione di effetti speciali, l’implementazione di copyright anche senza modificare l’immagine originale fino alla possibilità di rendere caratteri che computer non possiedono.Questa guida “PHP grafica dinamica, grafici e gradienti” è la seconda parte del volume “GD library con PHP”. “PHP grafica dinamica, grafici e gradienti” illustra molteplici utilizzi dei comandi descritti nella prima parte.Grafici lineari, a barre, a torta con legenda circolare, 2d e 3d e scelta automatica dei colori e grafici con immagini del prodotto analizzato. Posizionamento di valori e legende in qualsiasi punto e per i diagrammi circolari anche intorno ad essi finanche evidenziandone settori mediante estrazione di porzioni. Maschere per estrarre, da immagini, porzioni di qualsiasi forma.Creazione di poligoni 3d e generazione dinamica di immagini a stella con quantità di punte, rotazione e colori a scelta. Ellissi e spirali ruotate, logotipi ed emoticons dinamiche.Frasi su circonferenze con calcolo dimensioni dei font TrueTypeGradienti lineari e 2 o più colori, sferici, poligonali e stellari.Tutti gli script della guida operano esclusivamente con le funzioni GD library di PHP, senza uso di classi o software aggiuntivi. Ogni script è descritto e commentato passo-passo in lingua italiana.Gli esempi del libro sono implementati in pagine PHP sul sito dell'autore.In queste pagine i valori creativi delle immagini sono in chiaro, l’utente può cambiarli di modo che le immagini vengano rigenerate con i nuovi valori.Gli esempi e gli script, dei quali è disponibile il download, possono essere copiati, modificati e utilizzati senza chiedere autorizzazioni.La prima parte della guida dal titolo “PHP grafica dinamica, funzione e figure” descrive il set di istruzioni PHP/GD, per ciascuno di essi è presentato almeno uno script descritto e commentato passo-passo in lingua italiana.Le due parti sono anche disponibili in un unico volume dal titolo “GD library con PHP”.Leggi sull'app mobile di Scribd
Scarica l'app mobile gratuita di Scribd per leggere sempre e ovunque.
Anteprima del libro
PHP grafica dinamica, grafici e gradienti - Antonio Taccetti
Tavola dei Contenuti (TOC)
Grafici
Grafici a linee
es_97_grafico_andamento_azionario
Grafici a barre
es_98_grafico_a_barre_orizzontali_sondaggio_vacanza
es_99_grafico_a_barre_verticali
es_100_barre_verticali_Abitanti_nazioni_Europa
es_101_barre_verticali_3D_spese_familiari
es_102_barre_verticali_3d_spese_annue
Usare immagini per confrontare grandezze
es_103_Consumo_Birra
es_104_torta superfici_nazioni
Grafici a torta
es_105_grafico_a_torta_basilare
Scelta dei colori per i grafici a torta
es_106_generatore_colori
Posizionamento valori intorno al grafico a torta
es_108_diagramma_circolare_con_legende_circolari_e_standard
es_109_estrarre_settori_di_diagramma_circolare
es_110_diagramma_circolare_3d
es_111_estrarre_settori_diagramma_circolare_3D
Circonferenze poligoni e stelle
es_112_frasi_su_circonferenza
es_113_frasi_su_emicirconferenza
Calcolo dimensione caratteri TTF per circonferenze
es_114_dimensione_caratteri_ttf_e_GD
es_115_A_frasi_TTF_su_circonferenza
es_115_B_frasi_TTF_su_emicirconferenza
Poligoni ed effetti 3d
es_116_fra_circonferenze_e_poligoni
es_117_generatore_di_stelle
Ellissi ruotate e spirali
Ellisse ruotata di n gradi
es_118_ellisse_ruotata
es_119_spirale_ellittica_ruotata
Logotipi
Atomo con orbite
es_121_atomo_con_orbite
yin yang
es_122_Yin_Yang
emoticons
es_123_emoticons
Bandiere al vento
es_124_Bandiere al vento
Maschere
Maschera per ottenere e spostare
es_126_estrae_trasferisce_figura_ovale
Gradienti
Gradiente_lineare
es_128_gradiente_lineare
es_129_gradiente_lineare_3_colori
es_130_gradiente_sferico
es_132_gradiente_stella_imagerectangle
es_133_gradiente_stella_imagepolygon
Corona di stelle con gradiente
es_134_stelle_e_gradiente
Gradinetie per colorare oggetti esistenti
es_135_gradiente_lampada_accesa
Scelta dei gradenti
es_136_test_per_gradienti
Grafici
L'invenzione di questa tecnica è attribuita a William Playfair che alla fine del 1786 nel suo Commercial and Politica Atlas del 1786 ed in seguito, nel 1801, introdusse il grafico a torta o diagramma circolare.
Il diagramma circolare rappresenta rapporti fra valori ed è divenuto un metodo largamente usato tanto da essere spesso considerato indispensabile.
Con l'avvento dei computer, volendo dare agli utenti la possibilità di avere grafici creati dinamicamente, per esempio con dati letti da una tabella di database, è necessario crearli sul momento, la libreria GD dispone di tutti gli strumenti per questo compito.
Negli esempi che verranno presentati la trasparenza nelle immagini verrà esibita con riquadri bianchi/grigio-sfumati com'è usuale nei software di grafica evoluti.
Grafici a linee
Un tipo di rappresentazione grafica, intuitiva ed accurata, è il diagramma cartesiano.
Questo tipo di diagramma è utile per rappresentare due dati legati tra loro da una relazione.
Il diagramma cartesiano è formato da due semirette perpendicolari che si incontrano in un punto
Su ciascuna semiretta sono riportate le scale di due valori.
I grafici a linee sono ideali per mostrare l'andamento delle tendenze nel tempo.
Per esempio nell'asse orizzontale (X) sono riportati i 30 giorni di un mese e nell'asse verticale (y) dal basso verso l'alto la scala dei valori, per es. da 0 a 100 che rappresentano prezzi.
Nell'esempio classico, dato un piano cartesiano, sull'asse Y sono rappresenti i valori azionari di una determinata azienda, mentre sull'asse X il loro valore che cambia in un determinato periodo temporale.
Generalizzando questo esempio, è possibile rappresentare qualsiasi dato che si comporta come una funzione rispetto alla variabile sull'asse X.
es_97_grafico_andamento_azionario
Il grafico simula l'andamento di un ipotetico titolo azionario per 30 giorni.
I valori del titolo sono creati in modo casuale in un range fra 1 e 550 compresi.
Questi valori si rinnovano automaticamente ad ogni lancio dello script dando grafici sempre diversi.
Vengono disegnate sull'asse x i giorni, e sull'asse y la scala dei valori.
Parallele all'asse x, sono disegnate linee intermedie per meglio leggere il grafico.
Il font usato è arial.ttf
$Giorno = array(); // dichiara array dei giorni
$gg=1; // giorno del mese
for($x=1; $x<31; $x++)
{
$NumeroMinimo = 1; $NumeroMassimo = 550;
$n = rand($NumeroMinimo,$NumeroMassimo);
$Prezzo[$gg] = $n; // immette in ciascun giorno il prezzo come valore casuale fra 1 e 550
$gg++;
}
// Crea immagine truecolor di 350x280 pixel
$Immagine = imagecreatetruecolor(1240,600 );
// colore di fondo nel grafico
$Grigio = imagecolorallocate($Immagine, 200, 200, 200);
// Riempire lo sfondo con il colore selezionato in precedenza
imagefill($Immagine, 0, 0, $Grigio);
$Rosso = imagecolorallocate($Immagine,255,0,0); // valori ed etichette sulle coordinate
$Verde = imagecolorallocate($Immagine,0,102,0); // Linea del grafico
$Nero = imagecolorallocate($Immagine,0,0,0); // colore per ascisse ed ordinate
imagesetthickness($Immagine, 3); // larghezza tratto di 3 pixel
// disegna ascisse ed ordinate
imageline($Immagine, 40, 5, 40, 560, $Nero ); // X
imageline($Immagine, 40, 560, 1240, 560, $Nero ); // Y
imagesetthickness($Immagine, 1); // larghezza tratte di 1 pixel
$Giallo = imagecolorallocate($Immagine, 255, 255, 0);
// linee orizzontali tratteggiate gialle
$style = array(
$Giallo, $Giallo, $Giallo, $Giallo, $Giallo,
IMG_COLOR_TRANSPARENT, IMG_COLOR_TRANSPARENT, IMG_COLOR_TRANSPARENT, IMG_COLOR_TRANSPARENT, IMG_COLOR_TRANSPARENT);
imagesetstyle($Immagine, $style);
$S = 500;
for($y=60;$y<470;$y+=100)
{
imagestring($Immagine, 3, 18, $y, $S , $Giallo); // valori linee gialle tratteggiate
imageline($Immagine, 30, $y, 1240, $y, IMG_COLOR_STYLED); // linee gialle tratteggiate
$S-=100;
}
// scrittura di testi font, angolo rotazione, posizione x di partenza
$DimensioneFont = 10; $Font = font/arial.ttf
; $Angolo = 0; $xStart = 40;
// scala x, separatori dei giorni del mese giorni del mese e numero giorno
for($x=1;$x<31;$x++)
{
imageline($Immagine, $x*40, 560, $x*40, 580, $Nero ); // separatore
// disegna numero giorni del mese
imagettftext($Immagine, $DimensioneFont, $Angolo, $x*40+15, 580, $Nero, $Font, $x);
}
// Scrive valore delle coordinate
imagestring($Immagine, 5, 600, 583, G I O R N I
, $Rosso);// x in orizzontale
imagestringup($Immagine, 5, 2, 350, V A L O R I
, $Rosso);// y in verticale dal basso verso l'alto
// inizio della scrittura della linea del grafico e dei valori
$xP = 0; $yP = 0; // conterrà valore del giorno Precedente
$xC = 0; $yC = 560;// conterrà valore del giorno Corrente
$DimensioneFont = 8;
for($gg=1;$gg<31;$gg++) // scorre l'array dei prezzi/giorno
{
$xP = $xC; $xC = $gg*40+15;
$yP = $yC; $yC = 560 - $Prezzo[$gg];
imagesetpixel($Immagine, $gg*40+15,$Prezzo[$gg], $Nero);
imageline($Immagine, $xP,$yP,$xC,$yC, $Verde); // Linea del grafico
// prezzo giornaliero
imagettftext($Immagine, $DimensioneFont, $Angolo, $gg*40+18, 560-$Prezzo[$gg], $Rosso, $Font, $Prezzo[$gg]);
}
// imagepng($Immagine); // al browser
imagepng($Immagine, es_97_grafico_andamento_azionario.png
); // salva
imagedestroy($Immagine);// libera memoria
?>
utf-8>
es_102_grafico_andamento_azionario.png>
Risultato:
Grafici a barre
Il grafico a barre è un metodo per riassumere una serie di dati riguardanti una categoria.
I valori sono visualizzati utilizzando più barre della stessa larghezza, e ciascuna barra rappresenta una determinata categoria. L'altezza di ciascuna barra è proporzionale al valore o somma di valori della categoria che rappresenta.
Nel grafico a barre possono anche essere inserite e sovrapposte informazioni aggiuntive con linee di riferimento fra valori
Hai raggiunto la fine di questa anteprima. Registrati per continuare a leggere!
Pagina 1 di 1