Grazie allo standard CSS3 è possibile realizzare dei grafici circolari in modo abbastanza semplice, l'unico problema si pone se dobbiamo realizzarne molti e differenti tra loro. In questo caso infatti le variabili in gioco sono molteplici e ricschiamo così di riempire i nostri fogli di stile con montagne di codice inutile e ridontante.
Ho deciso quindi di crearmi una piccola funzione PHP che realizza il grafico circolare inviando direttamente i parametri che lo caratterizzano:
- La dimensione in pixel
- La sezione della barra del grafico
- Il colore della barra
- Il colore dello sfondo del grafico
- Il colore della barra e del suo sfondo
- Il valore in percentuale rappresentato dal grafico
- Il font del testo
- Il simbolo da applicare alla fine del testo
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Grafico a torta in PHP e CSS3</title> </head> <body> <style> body { background-image: radial-gradient(ellipse at center -260px, #8af 20%, #fff 100%); width:100%; height:800px; } .contain { float:left; margin-top:50px; margin-left:30px; } .pie { border-radius: 50%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; text-shadow:1px 1px 2px #333; text-align:center; font-family:Arial; } </style> <div class="contain"> <?php draw_pie(1, '300', 10, '#0c2', '#ddd', '#fff', '#0c2', 55, '%'); ?> </div> <div class="contain"> <?php draw_pie(2, '200', 30, '#ff0', '#f33', '#666', '#fff', 85, '%'); ?> </div> <div class="contain"> <?php draw_pie(3, '100', 10 ,'#111', '#fff', '#c9f', '#a9c', 23, '%'); ?> </div> </body> </html> E questa è la funzione in PHP che realizza i grafici: <?php function draw_pie($id, $size, $bar_size, $bar_color, $bgcol, $col2, $txt_color, $p = 0, $symbol = '') { $dy = $bar_size; ?> <div class="pie" style=" width: <?php echo $size + 4; ?>px; height: <?php echo $size + 4; ?>px; background-color: <?php echo $bar_color; ?>; border: 2px solid <?php echo $col2; ?>; background-image: <?php if ($p <= 50) { ?> linear-gradient(<?php echo intval(90 + ((360 / 100) * $p)); ?>deg, transparent 50%, <?php echo $col2; ?> 50%), <?php } else { ?> linear-gradient(<?php echo intval(90 + ((360 / 100) * ($p - 50))); ?>deg, transparent 50%, <?php echo $bar_color; ?> 50%), <?php } ?> linear-gradient(90deg, <?php echo $col2; ?> 50%, transparent 50%); "> <div style=" margin-top:<?php echo $dy; ?>px; color:<?php echo $txt_color; ?>; width:<?php echo $size - ($dy * 2); ?>px; height:<?php echo $size - ($dy * 2); ?>px; background-color:<?php echo $bgcol; ?>; border-radius:50%; margin-left:<?php echo $dy; ?>px; font-size:<?php echo intval($size / 3.5); ?>px; line-height:<?php echo intval($size - ($dy * 2)); ?>px; "> <?php echo $p.$symbol; ?> </div> </div> <?php } ?>