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），而目标是一个形状像条形（.target）的第三个div。我尝试做的是根据结果使.iner div完成.outer div的一定百分比（在本例中为14.77）。当平均值（.iner div）高于目标（现在是.outer div宽度）时会出现问题。现在.target div不是动态的，它位于.outer div的右侧，表示目标的.outer div。当平均值高于目标值时，这不起作用。当发生这种情况时，我想根据平均值超过目标的程度，使.target div在.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

不使用黑色背景并浮动内部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);

OR 直接计算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，在没有背景的情况下为目标使用黑色边框。

请参阅以下示例：

＆＃13;

.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;
    }

＆＃13;

<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>

＆＃13;

如何根据数据库

1 个答案: