Как создать гистограмму в CSS с массивом значений с плавающей запятой PHP?

Question

Как создать гистограмму в CSS с массивом значений с плавающей запятой PHP?

Я создаю основной веб-сайт с Microsoft WebMatrix. У меня есть массив значений с плавающей точкой в PHP. Я хочу использовать значения для создания гистограммы в CSS (например, значение 50.0 создает столбик с высотой 50% от 300 пикселей). Это весь код, который я использую, поскольку его не так много. Когда я запускаю его в браузере (Google Chrome или Internet Explorer), он записывает первое эхо-выражение, но не производит никаких полос. Как мне отредактировать мой код так, чтобы бары рисовались?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bar chart</title>
<style>
.bar
{
color: #00ff21;
width:  30px; //This defines the colour and width of the bars
}
</style>
</head>
<body>
<?php
echo("<p>This is my bar chart!</p>");

$values = array(50.0, 20.0, 35.0, 70.0); //This is the array of float values

for ($i = 0; $i < count($values); $i++) //This loop should create a bar for each element in the array
{
$currentHeight = 300 * $values[$i] / 100.0; ?>
<div class="bar" style="height: <?php echo($currentHeight); ?> "></div>
<?php
}
?>
</body>

0

css html php webmatrix

Решение

Другие решения

Я не уверен в том, что вы ищете, но вот три вопроса:

Для просмотра элемента div необходимо указать рамку или цвет фона:

background-color: #00ff21; или же border: solid;
Вам необходимо указать единицу высоты как px:

style="height: <?php echo($currentHeight); ?>px"
Div перезаписывают друг друга, поэтому расположите их или, возможно, плавайте:

style="float: left; height: <?php echo($currentHeight); ?>px"

0

Источник

Accepted Answer

Так что я не очень знаком с css, но у вас есть некоторые аргументы, отсутствующие в вашем элементе div, чтобы он работал.

<div class="bar" style="height: <?php echo $currentHeight . "px;"; ?> border: solid; display: inline-block;"></div>

Вы отражали высоту, не добавляя пиксельное распознавание, и не задавали ей сплошную границу, чтобы она не отображалась в веб-браузере в любом случае.

Также вы можете добавить границы и отображать значения внутри тегов стиля, но вам также нужно иметь пустой селектор высоты, я не совсем уверен, почему это так, но код будет выглядеть так:

        .bar
{
color: #00ff21;
width:  30px; //This defines the colour and width of the bars
height: ;
display: inline-block;
border: solid;
}

<div class="bar" style="height: <?php echo $currentHeight . "px;"; ?>"></div>

0