如何在进度条上添加标记答案

【问题标题】：how to put a marker on progress bar如何在进度条上添加标记
【发布时间】：2016-03-17 09:58:43
【问题描述】：

我有一些表格数据并使用角度 UI 引导程序和引导程序类。我想在图表选项卡中显示一个条形图，其中包含我在表格选项卡上显示的任何数据。如果我为此要求使用进度条，它不会向我显示预期值的标记。click here for bar design。我们如何放置那个标记（它可以是三角形或垂直线或任何可以区分的东西？

var app = angular.module('app', ['ui.bootstrap']);

app.controller('MainCtrl', ['$scope', function ($scope) {


$scope.data =
[{"transactionName":"Store Document GDR","actualVolume":251.0,"expectedVolume":500.0,"actualResponseTime":96.0,"expectedRT1":150.0,"expectedRT2":200.0},{"transactionName":"Submit Staging Doc","actualVolume":36.0,"expectedVolume":50.0,"actualResponseTime":86.0,"expectedRT1":200.0,"expectedRT2":250.0},{"transactionName":"Get Documents","actualVolume":7.0,"expectedVolume":50.0,"actualResponseTime":1293.0,"expectedRT1":1300.0,"expectedRT2":1500.0}];
  
  }]);

<html ng-app="app">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body ng-controller='MainCtrl'>
    <div class="panel-body">

       <uib-tabset>
            <uib-tab>
            <uib-tab-heading><b> table </b></uib-tab-heading>
            <div class="col-md-12">
                <table class="table table-bordered table-striped text-center" style="font-size:130%;font-weight: bold;" >
                    <thead>
                    <tr bgcolor="#00008b" ; style="color: #bce8f1">
                        <th class ="text-center" rowspan="2" style="vertical-align:middle">Transaction Name</th>
                        <th class ="text-center" colspan="2">Volume</th>
                    </tr>
                    <tr>
                        <td class ="text-center"><b>Actual</b></td>
                        <td class ="text-center"><b>Expected</b></td>
                        
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="record in data">
                        <td>{{record.transactionName}}</td>
                        <td>{{record.actualVolume}}</td>
                        <td>{{"0 - "}}{{record.expectedVolume}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            </uib-tab>
            <uib-tab>
            <uib-tab-heading><b> graph </b></uib-tab-heading>
              <div class="col-md-12">
                <table class="table table-bordered table-striped text-center" style="font-size:130%;font-weight: bold;" >
                    <thead>
                    <tr bgcolor="#00008b" ; style="color: #bce8f1">
                        <th class ="text-center" style="vertical-align:middle">Transaction Name</th>
                        <th class ="text-center">graph</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="record in data">
                        <td>{{record.transactionName}}</td>
                        <td>
                    </tr>
                    </tbody>
                </table>
            </div>
            </uib-tab>
         </uib-tabset>
        </div>
  </body>
  </html>

【问题讨论】：

标签： javascript css angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

要放置进度条，您可以使用标签
W3School Tag Progress

这是一个例子：

progress {
  background: #000;
  }

&lt;progress value="22" max="100"&gt;

【讨论】：

对不起，不是我的情况。在值中，我应该呈现实际值，并且我需要在 b/w 值和期望值的最大值中标记。

【解决方案2】：

进度条位于相对定位的容器内，其中箭头也在内部，带有position:absolute。所以你只需要设置left:expected%减去箭头图像宽度的一半。

var currentvalue = document.getElementById("value1").innerHTML;
var currentexpected = document.getElementById("expected1").innerHTML;
var thetarget = document.getElementById("theprogress");

thetarget.setAttribute("aria-valuenow", currentvalue);
thetarget.style.width = currentvalue + "%";
thetarget.innerHTML = currentvalue + "%";
document.getElementById("arrow").style.left = currentexpected + "%";

body {
  background-color: lavender !important;
}

.progress {
  position: relative !important;  
}

#arrow {
  position: absolute;
  margin-left: -16px;
}

table tr td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  background-color: white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<table>
<tr><td>value</td><td>expected</td></tr> 
<tr><td id=value1>70</td><td id=expected1>90</td></tr>
</table><br>

<div class="progress">
  <div id=theprogress class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
  <img src="http://i.imgur.com/q2BqI65.png" id=arrow alt=arrow>
</div>

codepen

【讨论】：

在这种情况下，我们如何为css（#arrow）绑定数据？
它是最后一个 javascript 行 document.getElementById("arrow").style.left = currentexpected + "%";
小更新：我现在确实从 css 中删除了 left 值，因为它是由 javascript 设置的。