Question

我有一个“问题”页面，该页面从mySQL生成这些数字。这些数字根据提出，保留或关闭的问题而不断变化。

$opened - 8  
$onHold - 3  
$completed - 60

我想将它们放置在 Bootstrap进度栏中。我该怎么做。

<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 15%"></div>
    <div class="progress-bar bg-success" role="progressbar" style="width: 30%"></div>
    <div class="progress-bar bg-info" role="progressbar" style="width: 20%"></div>
</div>

已更新
这解释了https://stackoverflow.com/a/46082290/5413283单个条，我正在寻找3条。

这是我尝试过的

<section>
    <div class="progress">
        <div class="progress-bar bg-success" role="progressbar" style="width: <?php echo $completed; ?>%;" aria-valuenow="<?php echo $bal; ?>" aria-valuemin="0" aria-valuemax="100"><?php echo $completed; ?></div>
        <div class="progress-bar bg-danger text-right pr-2" role="progressbar" style="width: <?php echo $opened; ?>%;" aria-valuenow="<?php echo $output; ?>" aria-valuemin="0" aria-valuemax="100"><?php echo $opened; ?></div>
        <div class="progress-bar bg-warning text-right pr-2" role="progressbar" style="width: <?php echo $onHold; ?>%;" aria-valuenow="<?php echo $output; ?>" aria-valuemin="0" aria-valuemax="100"><?php echo $onHold; ?></div>
    </div>
</section>

以下是输出
如何填充进度栏（没有灰色区域）

Answer 1

要将php变量写入html中，可以使用php标记并在所需位置回显变量。

<div class="progress">
    <div class="progress-bar" role="progressbar" style="width:<?php echo $opened; ?>%"></div>
    <div class="progress-bar" role="progressbar" style="width:<?php echo $onHold; ?>%"></div>
    <div class="progress-bar" role="progressbar" style="width:<?php echo $completed; ?>%"></div>
</div>

我们不知道这些值是百分比值还是准备数据需要一些计算。

更新：要使用3个值将满表填充到100％，您将需要找到将总数增加到100％的因数。像这样：（Demo）

$opened = 5;
$onHold = 22;
$completed = 1;
$total_of_3 = $opened + $onHold + $completed;
$factor =  100 / $total_of_3;

echo "New opened = " , $opened * $factor , "\n";
echo "New onHold = " , $onHold * $factor , "\n";
echo "New completed = " , $completed * $factor;

输出：

New opened = 17.857142857143
New onHold = 78.571428571429
New completed = 3.5714285714286

当然，如果您想精确地对准鼻子，或者想对数字进行四舍五入，则可以计算（并四舍五入）$new_opened和$new_onHold，然后使用100 - $new_opened + $new_onHold确定完美的$new_completed。

Answer 2

进度条将显示任务完成的百分比。为此，您将需要当前值，下限和上限值。

如果您可以获得这样的数字，请使用进度条，或者使用带有数字计数的引导标志之类的东西。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<button type="button" class="btn btn-primary">
  Tasks <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>
    
</body>
</html>

使用Bootstrap进度条在多个进度条（3条）中显示mysql数据

这是我尝试过的

2 个答案: