Guida Html5 la tua risorsa web sul nuovo markup html5 il linguaggio javascript e lo sviluppo di giochi su browser.
TUTORIALS

Grafici circolari con CSS3 e PHP

- 29-09-2015 - Letture: 1225

Tutorial: realizzare bellissimi grafici circolari utilizzando solo CSS3 e PHP

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
}

?>

 

Articoli correlati
Loading comments
ebook sviluppare giochi in html5 e javascript
Nome e Cognome
Email valida
Username
Password
* Cliccando su REGISTRATI accetti le nostre regole sulla privacy
ATTENZIONE: controllare sempre la cartella spam nella casella di posta, inquanto è possibile che alcuni provider inseriscano automaticamente la mail di attivazione in questa cartella.

CHIUDI
X

Password dimenticata ? Inserisci il tuo indirizzo email e ti invieremo i dati di accesso

Email valida
ATTENZIONE: controllare sempre la cartella spam nella casella di posta, inquanto è possibile che alcuni provider inseriscano automaticamente la mail di attivazione in questa cartella.

CHIUDI
X
Powered by: World(D) 1.5