堆叠式引导程序进度，通过工具提示显示多个范围

Question

我正在尝试创建一组堆叠的进度控件来显示不同计算范围和数据点之间的关系。下图是一个粗略的示例。共有三个范围和一个数据点。这些数字是任意的，因为我希望能够拥有更多或更少的每个数字。

我已经接近使用 Bootstrap 进度控件后的效果，但不知道如何获取线下的数字以及如何将数据点（图像示例中的 45）设置为类似工具提示的设计而不是另一个进度控件。下面是我到目前为止的 HTML。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress mb-3">
  <div class="progress-bar" role="progressbar" style="width:36%;background-color:var(--bs-body-bg);text-align:right;color:black;margin-right:5px;" aria-valuenow="36" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width:3%;border-top-left-radius: 10rem;border-bottom-left-radius: 10rem;border-top-right-radius: 10rem;border-bottom-right-radius: 10rem;" aria-valuenow="3" aria-valuemin="0" aria-valuemax="100">37</div>
    <div class="progress-bar" role="progressbar" style="width:61%;background-color:var(--bs-body-bg);text-align:left;color:black;margin-left:5px;" aria-valuenow="61" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress mb-3">
    <div class="progress-bar" role="progressbar" style="width:15%;background-color:var(--bs-body-bg);text-align:right;color:black;margin-right:5px;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">15</div>
    <div class="progress-bar bg-success" role="progressbar" style="width:70%;border-top-left-radius: 10rem;border-bottom-left-radius: 10rem;border-top-right-radius: 10rem;border-bottom-right-radius: 10rem;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">Range 1 (15-85)</div>
    <div class="progress-bar" role="progressbar" style="width:15%;background-color:var(--bs-body-bg);text-align:left;color:black;margin-left:5px;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">85</div>
</div>
<div class="progress mb-3">
    <div class="progress-bar" role="progressbar" style="width:25%;background-color:var(--bs-body-bg);text-align:right;color:black;margin-right:5px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25</div>
    <div class="progress-bar bg-warning" role="progressbar" style="width: 50%;border-top-left-radius: 10rem;border-bottom-left-radius: 10rem;border-top-right-radius: 10rem;border-bottom-right-radius: 10rem;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">Range 2 (25-75)</div>
    <div class="progress-bar" role="progressbar" style="width:25%;background-color:var(--bs-body-bg);text-align:left;color:black;margin-left:5px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">75</div>
</div>
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width:2%;background-color:var(--bs-body-bg);text-align:right;color:black;margin-right:5px;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0</div>
    <div class="progress-bar bg-danger" role="progressbar" style="width:100%;border-top-left-radius: 10rem;border-bottom-left-radius: 10rem;border-top-right-radius: 10rem;border-bottom-right-radius: 10rem;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Range 3 (0-100)</div>
    <div class="progress-bar" role="progressbar" style="width:2%;background-color:var(--bs-body-bg);text-align:left;color:black;margin-left:5px;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">100</div>
</div>

Answer 1

在引导程序本身中，没有真正的设施来制作这样的东西。您可以做的最接近的事情是使用网格和一些自定义定位来确保它按照条形放置。

我最好的解决方案是在引导程序之上构建一个扩展，添加标签和值并根据您的意愿放置它们。

有关扩展的更多文档可以在这里找到