Question

所以，我有三个div。.ner填充外部div（如果你想要一个条形图），还有一个代表虚线的目标。我从数组中获取两个数据： $ target = $ data-＆gt; data [2] [32] [3];

在这种情况下，这是9.83％。内部div数据是：

$clicks = $data->data[1][32][3];

在这种情况下，这是7.15％。所以我在外部div中将目标设置为宽度100％。我试图使.inner div完成填充外部div直到它到达目标。 CSS： CSS：

.outer,
.inner,
.target {
  height: 14px;
  margin-bottom: 5px;
}
.outer {
  background-color: #cccccc;
  width: 80%;
  margin: 20px auto;
  position: relative;
  font-size: 10px;
  line-height: 14px;
  font-family: sans-serif;
}
.inner {
  background-color: green;
  position: absolute;
  z-index: 1;
  text-align: right;
  width: calc(80% / 100 * <?php $clicks ?>);
  border-right: 2px solid black;
}
.inner:after {
  content: '<?php echo number_format((float)$clicks, 2, '.', ''); ?>%';
  display: inline-block;
  left: 10px;
  position: relative;
  height: 100%;
  top: -14px;
}
.target {
  background-color: transparent;
  width: 19px;
  position: absolute;
  z-index: 2;
  color: black;
  text-align: right;
  border-right: 2px dotted black;
}
.target:after {
  content: 'Target: <?php echo number_format((float)$target, 2, '.', ''); ?>%';
  display: inline-block;
  left: 28px;
  position: relative;
  height: 100%;
  top: 14px;
}

HTML：

<div class="outer" style="width: "<?php echo $base; ?>"> 
    <div class="target" style="width: 80%">
    </div>                   
    <div class="inner" style=" width: calc(<?php echo $bar_width; ?> / 100 * (<?php echo $clicks; ?> / <?php echo $base; ?> * 100))">
    </div>
</div>

PHP：

<?php
    $target = $data->data[2][32][3];
    $bar_width = '80%'; 
    $clicks = $data->data[1][32][3];
    $base   = max($target, $clicks);

?>

我附上了一些应该如何显示的图片：

问题在于，当内部超过它时，我尝试使目标在外部div上动态地向后移动.inner＆gt; 。目标。关于如何实现这一目标的任何想法？

Answer 1

我的想法是，您可以使用以下

设置超出目标时的目标css right

overPercent =  ((100 * current / goal) -100)/2;

Demo Using jQuery

注意：现在非常清晨我的数学可能需要一些改进

如何根据数组

1 个答案: