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; }

Deixe uma resposta

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