使用bootstrap进度条在多个进度条(3条)中显示mysql数据

qcuzuvrc 于 2021-06-18 发布在 Mysql

关注(0)|答案(2)|浏览(538)

我有一个从mysql生成这些数字的问题页面。这些数字根据提出的问题、搁置的问题或结束的问题不断变化。

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

我想把它们放在引导程序进度条中。我该怎么做。

<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 一个酒吧，我要三个酒吧。

这是我试过的

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

这是输出
如何填充进度条（没有灰色区域）

mysql php twitter-bootstrap

来源：https://stackoverflow.com/questions/53137650/using-bootstrap-progress-bar-to-display-mysql-data-in-multiple-progress-bars-3

2条答案

按热度按时间

vvppvyoh1#

进度条显示任务完成的百分比。为此，需要当前值、楼层和天花板值。
如果你能得到这样的数字，使用一个进度条，或者你应该使用类似于引导徽章的数字计数。

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

赞(0）回复(0）举报 2021-06-18

col17t5w2#

要将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个值将整个 Jmeter 填充到100%，您需要找到使总数达到100%的系数。像这样：（演示）

$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

当然，如果你想精确到100%，或者你想做一些数字的四舍五入，你可以计算（和四舍五入） $new_opened 以及 $new_onHold ，那就用 100 - $new_opened + $new_onHold 确定完美的 $new_completed .

赞(0）回复(0）举报 2021-06-18

我来回答

使用bootstrap进度条在多个进度条(3条)中显示mysql数据

这是我试过的

2条答案

相关问题

热门标签

最新问答