Question

我有一些表数据并使用角度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>

Answer 1

为了放置一个条形进度，您可以使用标记
W3School Tag Progress

这是一个例子：

＆＃13;

progress {
  background: #000;
  }

＆＃13;

<progress value="22" max="100">

＆＃13;

Answer 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

如何在进度条上放置标记

2 个答案: