如何使用PHP浮点值数组在CSS中创建条形图？_Php_Html_Css_Webmatrix

如何使用PHP浮点值数组在CSS中创建条形图？

php html css

如何使用PHP浮点值数组在CSS中创建条形图？,php,html,css,webmatrix,Php,Html,Css,Webmatrix,我正在使用Microsoft WebMatrix创建一个基本网站。我在PHP中有一个浮点值数组。我想使用这些值在CSS中创建条形图（例如，值为50.0将创建高度为300像素50%的条形图）。这是我使用的全部代码，因为没有那么多。当我在浏览器（Google Chrome或Internet Explorer）中运行它时，它会写入第一条echo语句，但不会生成任何条。如何编辑代码以便绘制条形图 <!DOCTYPE html> <html lang="en"> <head&

我正在使用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>


条形图
酒吧
{
颜色：#00ff21；
宽度：30px；//定义条的颜色和宽度
}    
我不确定您想要的外观，但这里有三个问题：
div需要边框或背景色才能看到它们：
背景色：#00ff21或边框：实心

您需要指定高度单位，如px：
style=“height:px”

div相互覆盖，因此定位它们或浮动：
style=“float:left；height:px”

所以我对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>