Grafici circolari con CSS3 e PHP



by   |  LETTURE 4132

Grafici circolari con CSS3 e PHP

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
Ecco la pagina web che implementa l'esempio dell'immagine:
 <!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 }  ?>