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

【问题标题】：How do I create a bar chart in CSS with an array of PHP float values?如何在 CSS 中使用 PHP 浮点值数组创建条形图？
【发布时间】：2015-04-07 19:49:55
【问题描述】：

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

【问题讨论】：

标签： php html css webmatrix

【解决方案1】：

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

【讨论】：

【解决方案2】：

我不确定你想要的外观，但这里有三个问题：

div 需要边框或背景颜色才能看到它们：

background-color: #00ff21; 或 border: solid;
你需要像px一样指定高度单位：

style="height: <?php echo($currentHeight); ?>px"
div 相互覆盖，因此定位它们或者浮动：

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

【讨论】：