Question

的index.php

<?php
$Dpoint = 80;
$Ipoint = 70;
$Hpoint = 60;
$Apoint = 90;
$max = 250; // max point 250;
$percent = 100; //set 100 percent;
$scale = 4.0; //

if ( !empty($max) ) {
 $Dpercent = ($Dpoint * $percent) / $max;
 $Ipercent = ($Ipoint * $percent) / $max;
 $Hpercent = ($Hpoint * $percent) / $max;
 $Apercent = ($Apoint * $percent) / $max;
}
?>
<html>
<head>
</head>

<body>
    <label><strong>A</strong></label><div class="bar"><div style="height:<?php echo round($Dpercent * $scale); ?>px;"></div></div><p><?php echo("{$Dpercent}%"."<br />");?></p>
    <label><strong>B</strong></label><div class="bar"><div style="height:<?php echo round($Ipercent * $scale); ?>px;"></div></div><p><?php echo("{$Ipercent}%"."<br />");?></p>
    <label><strong>C</strong></label><div class="bar"><div style="height:<?php echo round($Hpercent * $scale); ?>px;"></div></div><p><?php echo("{$Hpercent}%"."<br />");?></p>
    <label><strong>D</strong></label><div class="bar"><div style="height:<?php echo round($Apercent * $scale); ?>px;"></div></div><p><?php echo("{$Apercent}%"."<br />");?></p>
</body>
</html>

CSS

.bar{
    margin:auto;
    background: grey;
    width: 16px;
    /*margin: 0 0 5px 10px;*/
    padding: 1px;
    height: 400px;
    float:left;
}

.bar div{
    background-color: #00aeef;
    height: 16px;
}

我正在尝试制作垂直条形图，但是蓝色条是向下的，如何反转呢？所以我的意思是蓝色条从下面开始。

我似乎无法将文字放在那里，任何人都无法帮助我使酒吧看起来更相似？并扭转蓝条？

Answer 1

不确定你想要它，但这些酒吧是自下而上的。关键是使用正确的position设置和坐标。

＆＃13;

.bar{
    background: grey;
    width: 16px;
    padding: 1px;
    height: 160px;
    position: relative;
    display: inline-block;
}

.bar div{
  background-color: #00aeef;
  position: absolute;
  bottom: 1px;
  width: 16px;
  left: 1px;
}

＆＃13;

<div class="bar"><div style="height:80px;"></div></div>
<div class="bar"><div style="height:120px;"></div></div>
<div class="bar"><div style="height:12px;"></div></div>
<div class="bar"><div style="height:150px;"></div></div>

＆＃13;

反向php垂直条形图

1 个答案: