php - 如何根据数据库中的数据更改div的位置

Question

所以我使用 api 连接来获取一些数据。我得到的信息代表一个带有以下内容的条形 div:

$target = number_format((float)$data->data[2][32][3], 2, '.', '');

和一个数组的平均值:

public static function try($data)
        {

            $array = [];
            $sum = 0;
            $path = $data->data[2];
            foreach($path as $key => $item){
                if($key > 1 && isset($item[5])){ 
                    $array[] = (int)$item[5];
                    $sum += (int)$item[5];
                }
            }
            $avg = ($sum / count($array));
            return json_encode(number_format((float)$avg, 2, '.', ''));
        }

所以目标是:9.33%，平均值是 14.77% 我试图创建一个函数来使用另一个 div (.inner) 填充一个 div (.outer)，目标是第三个 div，形状像条形 (.target)。我尝试做的是根据结果(在本例中为 14.77)使 .iner div 完成 .outer div 的百分比。当平均值 (.iner div) 高于目标值(现在是 .outer div 宽度)时会出现问题。现在.target div 不是动态的，它放在.outer div 的右边，.outer div 代表目标。当平均值高于目标时，这不起作用。发生这种情况时，我想让 .target div 根据平均值超过目标的程度 procentually 落后于 .inner div。 CSS:

.outer, .inner, .target {
      height: 14px;
      margin-bottom: 5px;
    }

    .outer {
      background-color: #cccccc;
      width: 200px;
      margin: 0 auto;
    }

    .inner {
      background-color: #66a3ff;

    }

    .target {
       background-color: black;
       width: 3px;
       height: 14px;
       float: right;
    }

HTML:

<div class="outer"> 
        <div class="target"></div>                   
        <div class="inner" style="width: <?php echo round( 100 * \Helper::getDataForTry($data)) ?>%;"></div>


</div>

百分比函数:

public static function getDataForTry($data)
        {
            $target = number_format((float)$data->data[2][32][3], 2, '.', '');
            $array = [];
            $sum = 0;
            $path = $data->data[2];
            foreach($path as $key => $item){
                if($key > 1 && isset($item[5])){ 
                    $array[] = (int)$item[5];
                    $sum += (int)$item[5];
                }
            }
            $avg = ($sum / count($array));
            $percent = $avg / $target;
            return json_encode(number_format((float)$percent, 2, '.', ''));
        }

最终产品的外观图片:

在第一种情况下，平均值超过了目标 在第二种情况下，目标位于外层 div 的末尾，内层 div 根据他到达目标之前还剩多少改变其宽度(我已经这样做了)。

Answer 1

不要使用黑色背景和 float 内部 div，而是使用定位和边框来实现所需的行为。

另外，需要先定义外层div的基值(PHP):

$target =  9.33;
$avg    = 14.77;

$base   = max($target, $avg);

$base 现在将设置为最高值，在本例中为平均值 (14.77)。由于你的外部 div 应该是 200px 宽，你可以先在 PHP 中计算内部 div 的大小:

$bar_width    = 200px; // Change that to whatever you want.
$target_width = $bar_width / 100 * ($target / $base * 100);
$avg_width    = $bar_width / 100 * ($avg / $base * 100);

或直接在CSS中计算宽度(calc):

<div class="outer"> 
    <div class="target" style="width: calc(<?php echo $bar_width; ?> / 100 * (<?php echo $target; ?> / <?php echo $base; ?> * 100))"></div>                   
    <div class="inner" style="width: calc(<?php echo $bar_width; ?> / 100 * (<?php echo $avg; ?> / <?php echo $base; ?> * 100))"></div>
</div>

对于样式，外部div相对定位，内部div绝对定位，对没有背景的目标使用黑色边框。

请看下面的例子:

.outer, .inner, .target {
      height: 14px;
      margin-bottom: 5px;
    }

    .outer {
      background-color: #cccccc;
      width: 200px;
      margin: 0 auto;
      position: relative;
      font-size: 10px;
      line-height: 14px;
      font-family: sans-serif;
    }

    .inner {
      background-color: #66a3ff;
      position: absolute;
      z-index: 1;
      width: calc(200 / 100 * 14.77px);
      color: white;
    }

    .target {
      background-color: transparent;
      width: 19px;
      position: absolute;
      border-right: 3px solid black;
      z-index: 2;
      color: black;
      text-align: right;
    }

<h3>Average higher than target</h3>
<div class="outer"> 
        <div class="target" style="width: calc(200px / 100 * (9.33 / 14.77 * 100))">9.33%&nbsp;</div>                   
        <div class="inner" style="width: calc(200px / 100 * (14.77 / 14.77 * 100))">&nbsp;14.77%</div>
</div>

<h3>Average lower than target</h3>
<div class="outer"> 
        <div class="target" style="width: calc(200px / 100 * (14.77 / 14.77 * 100))">14.77%&nbsp;</div>                   
        <div class="inner" style="width: calc(200px / 100 * (9.33 / 14.77 * 100))">&nbsp;9.33%</div>
</div>