PHP: Gráfico de Barras com CSS

Olá pessoal! Entrando com mais um post.

Aprenda neste post a criar um gráfico de barras, usando PHP e CSS.

PHP

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grafico de Barras com CSS</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
  // definindo porcentagem
  $width1 = '28%';
  $width2 = '49%';
  $width3 = '33%';
  $width4 = '13%';
  $total  = 4; // total de barras
?>
<div id="principal">
  <p>Porcentagem de Acessos</p>
  <?
    for($i=1;$i <= $total;$i++){
	$width = ${'width' . $i};
  ?>
	<div id="barras">
          <div class="barra<?=$i?>" style="width:<?=$width ?>" ><?=$width ?></div>
	</div>
  <? } ?>
</div>
</body>
</html>

ESTILO.CSS

#principal{
  width:500px;
  height:60px;
  margin-left:10px;
  font-family:Verdana, Helvetica, sans-serif;
  font-size:14px;
}
#barras{
  width:428px;
  height:30px;
  float:left;
  margin: 2px 0;
}
.barra1, .barra2, .barra3, .barra4{ 	
  color:#FFF;
  padding-left:10px;
  height:30px;
  line-height:30px;
}
.barra1{ background-color: #FF0000; }
.barra2{ background-color: #0000FF; }
.barra3{ background-color: #FF6600; }
.barra4{ background-color: #009933; }

RESULTADO

Gráfico de Barras com PHP e CSS

Um comentário em “PHP: Gráfico de Barras com CSS

  • 27 de setembro de 2016 em 8:35
    Permalink

    Muito bom! Um dos melhores sites que já tive a oportunidade de conhecer, agregando conhecimento na vida dos iniciantes e mais experientes programadores! Parabéns!

    Resposta

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *