PHP: Gráfico de Barras com CSS na Vertical
Com base neste post, criamos a versão do gráfico na vertical.
— index.php
PHP
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grafico de Barras com CSS na Vertical</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
// definindo porcentagem
$height1 = '28%';
$height2 = '49%';
$height3 = '33%';
$height4 = '13%';
$total = 4; // total de barras
?>
<div id="principal">
<p>Porcentagem de Acessos</p>
<?php
for($i=1;$i <= $total;$i++){
$height = ${'height' . $i};
?>
<div id="barra">
<div class="cor<?= $i ?>" style="height:<?= $height ?>"> <?= $height ?> </div>
</div>
<? } ?>
</div>
</body>
</html> |
— estilo.css
#principal{ width:500px; height: 100%; margin-left:10px; font-family:Verdana, Helvetica, sans-serif; font-size:14px; } #barra{ margin: 0 2px; vertical-align: bottom; display: inline-block; } .cor1, .cor2, .cor3, .cor4{ color:#FFF; padding: 5px; } .cor1{ background-color: #FF0000; } .cor2{ background-color: #0000FF; } .cor3{ background-color: #FF6600; } .cor4{ background-color: #009933; } |
Quando coloco ele para de funcionar.