lunedì 29 dicembre 2014

Grafici a torta

I grafici a torta sono tipici per esprimere la percentuale dei dati sul totale, e con Livecode è un gioco da ragazzi crearli e modificarli.
Creiamo uno stack con quattro campi di testo, un pulsante e quattro cerchi colorati; ogni cerchio deve avere un colore diverso, ovviamente impostate opaque su true per i cerchi.. Impostate la proprietà rect uguale per tutti i cerchi, in modo da farli coincidere in forma e posizione.  Il nostro obbiettivo è questo:


Le proprietà da modificare di volta in volta saranno startAngle e arcAngle dei cerchi.
Mettete nel pulsante il seguente codice:

on mouseUp
   closefield
end mouseUp

on closefield
   #metodo veloce di fare le somme del contenuto dei campi
   put (field 1) + (field 2) + (field 3) + (field 4) into somma
   #calcoliamo la percentuale di ciascun valore
   put (field 1) / somma into perc1
   put (field 2) / somma into perc2
   put (field 3) / somma into perc3
   put (field 4) / somma into perc4
   #ridimensioniamo gli spicchi
   set the arcangle of graphic 1 to (360 * perc1)
   set the startangle of graphic 2 to (360 * perc1)
   set the arcangle of graphic 2 to (360 * perc2)
   set the startangle of graphic 3 to (360 * perc1) + (360 * perc2)
   set the arcangle of graphic 3 to (360 * perc3)
   set the startangle of graphic 4 to (360 * perc1) + (360 * perc2) + (360 * perc3)
   set the arcangle of graphic 4 to (360 * perc4)
end closefield

e impostate il behavior dei campi a quelle del pulsante. In questo modo cambiando i valori nei campi (o premendo il pulsante), il grafico si aggiornerà da solo.
Come vedete l'angolo iniziale (startAngle) di uno spicchio deve coincidere son l'angolo finale (arcAngle) del precedente.
Per chi non lo sapesse, il behavior è una proprietà che impone ad un oggetto di eseguire il codice in un altro oggetto. Nel nostro esempio ci ha risparmiato di scrivere quattro volte lo stesso codice. Per impostarlo bisogna fornire il long ID del pulsante. Nel mio caso è: button id 1015 of stack "Untitled 1".

Nessun commento:

Posta un commento