Reverse PHP вертикальная гистограмма

index.phpReverse 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; 
}

я пытаюсь сделать вертикальную гистограмму, но синяя полоса вверх вниз, как повернуть его вспять? поэтому я имею в виду синее начало бара внизу.

Я не могу сделать текст там тоже, не могу ли кто-нибудь помочь мне сделать планку более похожим? и отменить синюю полосу?

источник

2015-01-21 Cherry Poh Shu Lin

Это выглядит как/CSS вопрос HTML - вы могли бы сделать обычный HTML/CSS [фрагмент кода] (http://blog.stackoverflow.com/2014/09/introducing- runnable-javascript-css-and-html-code-snippets /), чтобы было легче ответить. – flob

Не совсем уверен, как вы хотите, но эти стержни снизу вверх. Ключ должен использовать правильные настройки и координаты position.

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

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

источник

2015-01-21 17:20:34 MightyPork

спасибо, ты лучший! это все, что я хотел, но еще один простой вопрос, если у меня есть текст, как я могу поместить их все в правую сторону? Я редактирую ваш код, вы можете проверить его? –

благодарим вас за помощь ~ –

Извините, я не совсем понимаю, что вы хотите делать. Поместить текст внутри баров? – MightyPork

Reverse PHP вертикальная гистограмма

ответ

Смежные вопросы