PHP: Gráfico de Barras com CSS na Vertical

admin 17 de dezembro de 201917 de dezembro de 2019 1 Comment CSS, gráfico, vertical

Com base neste post, criamos a versão do gráfico na vertical.

— index.php
PHP

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

One thought on “PHP: Gráfico de Barras com CSS na Vertical”

Felipe

30 de junho de 2020 em 17:11
Permalink

Quando coloco ele para de funcionar.
Resposta

Deixe um comentário Cancelar resposta