如何使用 PHP 浮点值数组在 CSS 中创建条形图?
How do I create a bar chart in CSS with an array of PHP float values?
我正在使用 Microsoft WebMatrix 创建一个基本网站。我在 PHP 中有一个浮点值数组。我想使用这些值在 CSS 中创建一个条形图(例如,值 50.0 创建一个高度为 300 像素的 50% 的条形图)。这是我正在使用的全部代码,因为代码不多。当我在浏览器(Google Chrome 或 Internet Explorer)中 运行 它时,它会写入第一个 echo 语句,但不会产生任何条形图。如何编辑我的代码以便绘制条形图?
<!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>
我不确定你想要的外观,但这里有三个问题:
div 需要边框或背景颜色才能看到它们:
background-color: #00ff21;
或 border: solid;
您需要指定高度单位如px:
style="height: <?php echo($currentHeight); ?>px"
div 会互相覆盖,所以定位它们或浮动:
style="float: left; height: <?php echo($currentHeight); ?>px"
所以我对 css 不是很熟悉,但是你的 div 元素中缺少一些参数才能正常工作。
<div class="bar" style="height: <?php echo $currentHeight . "px;"; ?> border: solid; display: inline-block;"></div>
您在没有添加 px 识别的情况下回显了高度,并且没有给它实线边框,所以无论如何它都不会在网络浏览器中显示出来。
您还可以在样式标签内添加边框和显示值,但您还需要在其中设置空的高度选择器,我不完全确定为什么会这样,但代码看起来像这样:
.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>
我正在使用 Microsoft WebMatrix 创建一个基本网站。我在 PHP 中有一个浮点值数组。我想使用这些值在 CSS 中创建一个条形图(例如,值 50.0 创建一个高度为 300 像素的 50% 的条形图)。这是我正在使用的全部代码,因为代码不多。当我在浏览器(Google Chrome 或 Internet Explorer)中 运行 它时,它会写入第一个 echo 语句,但不会产生任何条形图。如何编辑我的代码以便绘制条形图?
<!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>
我不确定你想要的外观,但这里有三个问题:
div 需要边框或背景颜色才能看到它们:
background-color: #00ff21;
或border: solid;
您需要指定高度单位如px:
style="height: <?php echo($currentHeight); ?>px"
div 会互相覆盖,所以定位它们或浮动:
style="float: left; height: <?php echo($currentHeight); ?>px"
所以我对 css 不是很熟悉,但是你的 div 元素中缺少一些参数才能正常工作。
<div class="bar" style="height: <?php echo $currentHeight . "px;"; ?> border: solid; display: inline-block;"></div>
您在没有添加 px 识别的情况下回显了高度,并且没有给它实线边框,所以无论如何它都不会在网络浏览器中显示出来。
您还可以在样式标签内添加边框和显示值,但您还需要在其中设置空的高度选择器,我不完全确定为什么会这样,但代码看起来像这样:
.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>